Css и javascript. Возможно ли это в css?

У меня довольно сложная проблема, на которую я застрял. Я был бы признателен за понимание, если это возможно с помощью CSS. У меня 6 разделов, 1-3 - в левом столбце и 4-6 в правой колонке. Когда вы нажимаете любой из div, они скрывают использование jquery hide(). Мне трудно найти часть, когда вы удаляете один div, мне нужно, чтобы они переупорядочивались определенным образом. Пожалуйста, см. Прилагаемое изображение для профайлов заказа/переупорядочения. см. мою скрипку для моего прогресса, спасибо кучу за помощь.

https://jsfiddle.net/m44pzvz4/

 <div id="container">
     <div class="child">1</div>
     <div class="child">2</div>
     <div class="child">3</div>
     <div class="child">4</div>
     <div class="child">5</div>
     <div class="child">6</div>  
 </div>

enter image description here

Итак, вы можете видеть, что если какой-либо 1-3 div удаляется, divs в 4-6 нужно переместить из левого столбца в последнее пятно в первом столбце.

Ответы

Ответ 1

Вы можете использовать flex-flow: column wrap:

$(".item").each(function() {
  $(this).on("click", function() {
    $(this).hide()
  });
});

$("button").each(function(index) {
  $(this).on("click", function() {
    $('#' + (index + 1)).toggle();
  });
});
.container {    
  display: -webkit-flex;     
  display: flex;             
  -webkit-flex-flow: column wrap;
  flex-flow: column wrap;
  width: 100px;
  height: 150px;
}

.item {
  width: 50px;
  height: 50px;
  border: 1px;
  line-height: 50px;
  text-align: center;
}

.r { background-color: #bf616a; }
.o { background-color: #d08770; }
.y { background-color: #ebcb8b; }
.g { background-color: #a3be8c; }
.b { background-color: #96b5b4; }
.v { background-color: #8fa1b3; }

.layout {  
  display: -webkit-flex;
  display: flex;        
  width: 400px;
  -webkit-justify-content: space-around;
  justify-content: space-around;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="layout">
  <div class="container">
    <div id='1' class="item r">1</div>
    <div id='2' class="item o">2</div>
    <div id='3' class="item y">3</div>
    <div id='4' class="item g">4</div>
    <div id='5' class="item b">5</div>
    <div id='6' class="item v">6</div>
  </div>

  <div>
    Toggles:
    <div>1
      <button>toggle</button>
    </div>
    <div>2
      <button>toggle</button>
    </div>
    <div>3
      <button>toggle</button>
    </div>
    <div>4
      <button>toggle</button>
    </div>
    <div>5
      <button>toggle</button>
    </div>
    <div>6
      <button>toggle</button>
    </div>
  </div>
</div>

Ответ 2

Используйте столбцы CSS и удалите свойства float ваших детей:

#container {
  /* ... */
  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2;  /* Firefox */
  column-count: 2;
  height: 300px;
}

Кроме того, чтобы ваши блоки не разделялись между столбцами (нашла здесь):

.child {
    /* ... */
    -webkit-column-break-inside: avoid; /* Chrome, Safari */
    page-break-inside: avoid;           /* Theoretically FF 20+ */
    break-inside: avoid-column;         /* IE 11 */
    display:table;                      /* Actually FF 20+ */
}

JS Fiddle Demo