title: Push down bottom div when slideDown with multiple columns and rows
body: <p>I have multiple items organized in multiple columns and rows </p>
  
  <pre><code> &lt;div class="items"&gt;
      &lt;div class="item-1"&gt;
      &lt;div class="item-2"&gt;
      &lt;div class="item-3"&gt;
      &lt;div class="item-4"&gt;
      &lt;div class="item-5"&gt;
      ...
   &lt;/div&gt;
  </code></pre>
  
  <p>I'm using jQuery slidedown to show hide content of each item when clicks. I want to push the bottom content correctly, ie extend the same column to which the object belongs.</p>
  
  <p>Example with basic float:left and width:33%</p>
  
  <p><a href="http://jsfiddle.net/kurtko/4w8n1frr/">http://jsfiddle.net/kurtko/4w8n1frr/</a></p>
  
  <p>I have tried several methods:</p>
  
  <p>1) Using columns with float:left, then insert items changing the order with PHP. From: 1,2,3,4,5,6,7,8,9 to 1,4,7,2,5,8,3,6,9.</p>
  
  <p><a href="http://jsfiddle.net/kurtko/adLL8gmn/">http://jsfiddle.net/kurtko/adLL8gmn/</a> </p>
  
  <pre><code>&lt;div class="items"&gt;    
   &lt;div class="column&gt;
     &lt;div class="item-1"&gt;
     &lt;div class="item-4"&gt;
     &lt;div class="item-7"&gt;
   &lt;/div&gt;
   &lt;div class="column&gt;
     &lt;div class="item-2"&gt;
     &lt;div class="item-5"&gt;
     &lt;div class="item-8"&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is a good method, but when I use responsive version with one column the order is incorrect.</p>
  
  <p>2) Masonry. Masonry - Isotope has a custom layout mode called 'masonryColumnShift' but in current version 2 is disabled.</p>
  
  <p><a href="http://isotope.metafizzy.co/v1/custom-layout-modes/masonry-column-shift.html">http://isotope.metafizzy.co/v1/custom-layout-modes/masonry-column-shift.html</a></p>
  
  <p>3) Flexbox. Using:</p>
  
  <p><a href="http://jsfiddle.net/kurtko/7cu5jvrr/">http://jsfiddle.net/kurtko/7cu5jvrr/</a></p>
  
  <pre><code>.items {    
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: flex-start;
  }
  
  .item {
     width: 33.3%;
  }
  </code></pre>
  
  <p>Good results but not perfect. When an item changes its height a white space is created below the row.</p>
  
  <p>Any ideas?</p>
  
  <p>Thanks.</p>