title: css & javascript alignment issue. Is this even possible in css?
body: <p>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.</p>
  
  <p><a href="https://jsfiddle.net/m44pzvz4/" rel="nofollow noreferrer">https://jsfiddle.net/m44pzvz4/</a> </p>
  
  <pre><code> &lt;div id="container"&gt;
       &lt;div class="child"&gt;1&lt;/div&gt;
       &lt;div class="child"&gt;2&lt;/div&gt;
       &lt;div class="child"&gt;3&lt;/div&gt;
       &lt;div class="child"&gt;4&lt;/div&gt;
       &lt;div class="child"&gt;5&lt;/div&gt;
       &lt;div class="child"&gt;6&lt;/div&gt;  
   &lt;/div&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/6yJlc.jpg" alt="enter image description here"> </p>
  
  <p>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.</p>