title: Responsive Webdesign with Bootstrap: Equal height boxes for 3-column and 2-column grid layout
body: <p>I am using Bootstrap 3.2.0 and I have a grid design with 6 boxes.</p>
  
  <p>The first three boxes have more content than the last three ones.</p>
  
  <p>For large screens sizes I have a 3-column layout, for medium screens sizes 2-column and small one 1-column. The 1-column layout is not the problem, because all boxes will be positioned vertically.</p>
  
  <p>For the 3-column layout the boxes 1, 2 and 3 should be positioned in one row with equal heights. The same for boxes 4, 5 and 6: in one row below the first row and with equal heights.</p>
  
  <p>For the 2-colums layout the boxes 1 and 2 should be in one, boxes 3 and 4,5 should be in one row and box 6 in the last row on the left hand side.</p>
  
  <p>You can see this what I wanted to have in this picture:
  <img src="https://i.stack.imgur.com/6izQF.png" alt="Layout 3-column and 2 column layout"></p>
  
  <p>I made a fiddle so you can see what I did:
  <a href="http://jsfiddle.net/5tJk3/" rel="nofollow noreferrer">http://jsfiddle.net/5tJk3/</a></p>
  
  <p>Here is the code snippet:</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
      &lt;div class="row-fluid"&gt;
          &lt;div class="col-sm-6 col-md-4"&gt;
              &lt;div class="bs-grid-big"&gt;
                  Box 1
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-6 col-md-4"&gt;
              &lt;div class="bs-grid-big"&gt;
                  Box 2
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-6 col-md-4"&gt;
              &lt;div class="bs-grid-big"&gt;
                  Box 3
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row-fluid"&gt;
          &lt;div class="col-sm-6 col-md-4"&gt;
              &lt;div class="bs-grid-small"&gt;
                  Box 4
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-6 col-md-4"&gt;
              &lt;div class="bs-grid-small"&gt;
                  Box 5
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-6 col-md-4"&gt;
              &lt;div class="bs-grid-small"&gt;
                  Box 6
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Is there an easy way to do this with Bootstrap? I think the 2-column layout will be hard to get box 4 and 5 to an equal height with box 3.</p>