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

i have rather difficult issue i'm stuck on appreciate insight if possible css. have 6 divs, 1-3 need in left column, , 4-6 in right column. when click of divs, hide using jquery hide(). part finding difficult when remove 1 div, need them reorder in specific way. please see attached image order / reorder proses im going for. see fiddle progress, bunch 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 can see if 1-3 div removed, divs in 4-6 need b moved left column last spot in first column.

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>