title: Bootstrap 3 responsive columns of varying heights
body: <p><strong>EDIT</strong> The pricing tables' content will all be dynamically generated, I cannot predict their height, I'm simply using the <strong>400px</strong> case for the diagram. So I can't set a static height to each column as a fix.</p>
  
  <p>I have 8 pricing tables
  They are all <strong>similar</strong> heights close to 400px, with the <strong>largest (red square)</strong> being 430px and the smallest at a height of 390px.</p>
  
  <p>Responsive class for columns: <code>class="col-lg-3 col-md-4 col-sm-6"</code></p>
  
  <p>HTML layout:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;% columns.each do |column| %&gt;
          &lt;div class="col-lg-3 col-md-4 col-sm-6"&gt;
              CONTENT
          &lt;/div&gt;
      &lt;% end %&gt;   
  &lt;/div&gt;
  </code></pre>
  
  <p>How do I prevent columns being pushed off into <strong>"new row"</strong>, i.e.
  All the columns are contained in the same <code>div.row</code> tag so they can act responsively.
  But in the second set of columns, the first two "slots" are skipped, the third row (not shown) begins like normal however.</p>
  
  <p><strong>IMPORTANT THAT THEY'RE ALL IN THE SAME <code>.row</code> OBJECT</strong>
  So that responsive aspect works and columns collapse down.</p>
  
  <h2>Diagram of problem:</h2>
  
  <p><img src="https://i.stack.imgur.com/t9eRe.png" alt="column_problem"></p>
  
  <h2>What I want is something more like this:</h2>
  
  <p><img src="https://i.stack.imgur.com/KCFcX.png" alt="enter image description here"></p>