title: Bootstrap row with columns of different height
body: <p>I currently have something like:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-md-4"&gt;Content&lt;/div&gt;
      &lt;div class="col-md-4"&gt;Content&lt;/div&gt;
      &lt;div class="col-md-4"&gt;Content&lt;/div&gt;
      &lt;div class="col-md-4"&gt;Content&lt;/div&gt;
      &lt;div class="col-md-4"&gt;Content&lt;/div&gt;
      &lt;div class="col-md-4"&gt;Content&lt;/div&gt;
      &lt;div class="col-md-4"&gt;Content&lt;/div&gt;
      &lt;div class="col-md-4"&gt;Content&lt;/div&gt;
      &lt;div class="col-md-4"&gt;Content&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now assuming that, <code>content</code> was boxes of different height, with all the same width - how could I keep the same "grid based layout" and yet have all the boxes line up under each other, instead of in perfect lines.</p>
  
  <p>Currently TWBS will place the next line of <code>col-md-4</code> under the longest element in the previous third row., thus each row of items is perfectly aligned an clean - while this is awesome I want each item to fall directly under the last element ("Masonry" layout)</p>