title: Bootstrap fluid row columns with different height
body: <p>Dynamically I create a set of boxes with slightly different height and want to appear 2, 3 or 4 of them (depending on the screen size) at the same row. I tried the following markup with bootstrap:</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
    &lt;div class="row-fluid"&gt;
      &lt;div class="col-xs-6"&gt;
        Two&lt;br&gt;Lines
      &lt;/div&gt;
      &lt;div class="col-xs-6"&gt;
        Two&lt;br&gt;Lines
      &lt;/div&gt;
      &lt;div class="col-xs-6" style="background-color: red"&gt;
        Three&lt;br&gt;Lines&lt;br&gt;Jup
      &lt;/div&gt;
      &lt;div class="col-xs-6"&gt;
        Two&lt;br&gt;Lines
      &lt;/div&gt;
      &lt;div class="col-xs-6"&gt;
        Two&lt;br&gt;Lines
      &lt;/div&gt;
      &lt;div class="col-xs-6"&gt;
        Two&lt;br&gt;Lines
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My problem is the space below my third column. </p>
  
  <p><img src="https://i.stack.imgur.com/Gxfo9.png" alt="enter image description here"></p>
  
  <pre><code> A  B
   C  D
   C  E &lt;- Should wrap to next row, because of C
   F  G
  </code></pre>
  
  <p>Can you tell how to achieve this? I recognized the advice to use a clearfix but I guess this attempt will cause problems and ugly code when using a different count of columns.</p>
  
  <p>Thanks for your answers.</p>