css & javascript alignment issue. Is this even possible in css?

Question

I have a rather difficult issue I'm stuck on I would appreciate some insight to if this is even possible with CSS. I have 6 divs, 1-3 need to be in a left column, and 4-6 in a right column. When you click any of the divs, they hide using jquery hide(). The part I am finding difficult is when you remove one div, I need them to reorder in a specific way. Please see attached image for the order / reorder proses im going for. see my fiddle for my progress, thanks a bunch for the help.

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>

So you can see that if any 1-3 div is removed, the divs in 4-6 need to b moved from left column to the last spot in the first column.

Answer 1

You can use 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>