title: Bootstrap: how to stack divs of different heights?
body: <p>This question is a bit similar to <a href="https://stackoverflow.com/questions/6131661/stack-divs-with-different-heights">this one</a>, but I want to know if there is a pure CSS solution that is compatible with Bootstrap. </p>
  
  <p>Basically, I have the following layout:</p>
  
  <p><img src="https://i.stack.imgur.com/mbLye.png" alt="enter image description here"></p>
  
  <p>This is the HTML of that page:</p>
  
  <pre><code>&lt;div class="menu row"&gt;
      &lt;div class="menu-category list-group col-lg-3 col-md-4 col-sm-6 col-xs-12"&gt;
          &lt;div class="menu-category-name list-group-item active"&gt;Category&lt;/div&gt;&lt;a href="#" class="menu-item list-group-item"&gt;Lorem ipsum.&lt;span class="badge"&gt;€ 0.00&lt;/span&gt;&lt;/a&gt;
          &lt;a href="#" class="menu-item list-group-item"&gt;Lorem ipsum.&lt;span class="badge"&gt;€ 0.00&lt;/span&gt;&lt;/a&gt;
          &lt;a href="#" class="menu-item list-group-item"&gt;Lorem ipsum.&lt;span class="badge"&gt;€ 0.00&lt;/span&gt;&lt;/a&gt;
          &lt;a href="#" class="menu-item list-group-item"&gt;Lorem ipsum.&lt;span class="badge"&gt;€ 0.00&lt;/span&gt;&lt;/a&gt;
          &lt;a href="#" class="menu-item list-group-item"&gt;Lorem ipsum.&lt;span class="badge"&gt;€ 0.00&lt;/span&gt;&lt;/a&gt;
          &lt;a href="#" class="menu-item list-group-item"&gt;Lorem ipsum.&lt;span class="badge"&gt;€ 0.00&lt;/span&gt;&lt;/a&gt;
          &lt;a href="#" class="menu-item list-group-item"&gt;Lorem ipsum.&lt;span class="badge"&gt;€ 0.00&lt;/span&gt;&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div class="menu-category list-group col-lg-3 col-md-4 col-sm-6 col-xs-12"&gt;
          &lt;div class="menu-category-name list-group-item active"&gt;Category&lt;/div&gt;&lt;a href="#" class="menu-item list-group-item"&gt;Lorem ipsum.&lt;span class="badge"&gt;€ 0.00&lt;/span&gt;&lt;/a&gt;
          &lt;a href="#" class="menu-item list-group-item"&gt;Lorem ipsum.&lt;span class="badge"&gt;€ 0.00&lt;/span&gt;&lt;/a&gt;
          &lt;a href="#" class="menu-item list-group-item"&gt;Lorem ipsum.&lt;span class="badge"&gt;€ 0.00&lt;/span&gt;&lt;/a&gt;
          &lt;a href="#" class="menu-item list-group-item"&gt;Lorem ipsum.&lt;span class="badge"&gt;€ 0.00&lt;/span&gt;&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div class="menu-category list-group col-lg-3 col-md-4 col-sm-6 col-xs-12"&gt;
          &lt;div class="menu-category-name list-group-item active"&gt;Category&lt;/div&gt;&lt;a href="#" class="menu-item list-group-item"&gt;Lorem ipsum.&lt;span class="badge"&gt;€ 0.00&lt;/span&gt;&lt;/a&gt;
          &lt;a href="#" class="menu-item list-group-item"&gt;Lorem ipsum.&lt;span class="badge"&gt;€ 0.00&lt;/span&gt;&lt;/a&gt;
          &lt;a href="#" class="menu-item list-group-item"&gt;Lorem ipsum.&lt;span class="badge"&gt;€ 0.00&lt;/span&gt;&lt;/a&gt;
          &lt;a href="#" class="menu-item list-group-item"&gt;Lorem ipsum.&lt;span class="badge"&gt;€ 0.00&lt;/span&gt;&lt;/a&gt;
          &lt;a href="#" class="menu-item list-group-item"&gt;Lorem ipsum.&lt;span class="badge"&gt;€ 0.00&lt;/span&gt;&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div class="menu-category list-group col-lg-3 col-md-4 col-sm-6 col-xs-12"&gt;
          &lt;div class="menu-category-name list-group-item active"&gt;Category&lt;/div&gt;&lt;a href="#" class="menu-item list-group-item"&gt;Lorem ipsum.&lt;span class="badge"&gt;€ 0.00&lt;/span&gt;&lt;/a&gt;
          &lt;a href="#" class="menu-item list-group-item"&gt;Lorem ipsum.&lt;span class="badge"&gt;€ 0.00&lt;/span&gt;&lt;/a&gt;
          &lt;a href="#" class="menu-item list-group-item"&gt;Lorem ipsum.&lt;span class="badge"&gt;€ 0.00&lt;/span&gt;&lt;/a&gt;
          &lt;a href="#" class="menu-item list-group-item"&gt;Lorem ipsum.&lt;span class="badge"&gt;€ 0.00&lt;/span&gt;&lt;/a&gt;
          &lt;a href="#" class="menu-item list-group-item"&gt;Lorem ipsum.&lt;span class="badge"&gt;€ 0.00&lt;/span&gt;&lt;/a&gt;
          &lt;a href="#" class="menu-item list-group-item"&gt;Lorem ipsum.&lt;span class="badge"&gt;€ 0.00&lt;/span&gt;&lt;/a&gt;
          &lt;a href="#" class="menu-item list-group-item"&gt;Lorem ipsum.&lt;span class="badge"&gt;€ 0.00&lt;/span&gt;&lt;/a&gt;
          &lt;a href="#" class="menu-item list-group-item"&gt;Lorem ipsum.&lt;span class="badge"&gt;€ 0.00&lt;/span&gt;&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div class="menu-category list-group col-lg-3 col-md-4 col-sm-6 col-xs-12"&gt;
          &lt;div class="menu-category-name list-group-item active"&gt;Category&lt;/div&gt;&lt;a href="#" class="menu-item list-group-item"&gt;Lorem ipsum.&lt;span class="badge"&gt;€ 0.00&lt;/span&gt;&lt;/a&gt;
          &lt;a href="#" class="menu-item list-group-item"&gt;Lorem ipsum.&lt;span class="badge"&gt;€ 0.00&lt;/span&gt;&lt;/a&gt;
          &lt;a href="#" class="menu-item list-group-item"&gt;Lorem ipsum.&lt;span class="badge"&gt;€ 0.00&lt;/span&gt;&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The problem is, as you can see, that the row system of Bootstrap is a bit inconvenient here. I want these categories to stack in the most optimal way. 
  So my question is: how can I do that with CSS? The masonry plugin seems excellent but I would like to keep it for plan B.  </p>
  
  <p>Thanks!</p>