title: Bootstrap 3 Responsive Panel Layout with Varying Heights
body: <p>We are trying to use the bootstrap 3 panels to create a responsive grid layout, however we are unable to work out how to get them to display in the way that we want them. Below shows an example of what we have so far:</p>
  
  <p><img src="https://i.stack.imgur.com/KibXL.png" alt="enter image description here"></p>
  
  <p>And the django/bootstrap code that generates the layout (<code>indicents</code> is simply a list of objects where we display one <code>incident_panel.html</code> per list item):</p>
  
  <pre><code>{% for incident in incidents %}
      &lt;div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"&gt;
          {% include 'incident_panel.html' %}
      &lt;/div&gt;
  {% endfor %}
  </code></pre>
  
  <p>The problem is caused here by the varying heights of panels #5, #6 and #8, which means we don't get a complete row laid out below them. Ideally, we would want the layout to do something like this:</p>
  
  <p><img src="https://i.stack.imgur.com/yQ1EB.png" alt="enter image description here"></p>
  
  <p>We are looking for a CSS based solution if possible, which will maintain the responsive behavior of laying the panels out with varying number of columns based on screen width. There are a couple of solutions we have considered, but neither of them are particularly good:</p>
  
  <ul>
  <li>Apply a minimum height to every panel - the difficulty is that there is no sensible value for minimum height, and we would either end up with a high value causing lots of wasted space inside panels, or a low value that wouldn't completely resolve this issue.</li>
  <li>Move the definition of the grid layout into our view code (create a 2D array of incidents) and then wrap each row in a <code>&lt;div class="row-fluid"&gt;</code> element. This is more elegant, however to maintain the responsive behavior we would have to layout 3 different grids on the page which we show/hide based on screen width.</li>
  </ul>