title: Bootstrap equal height rows inside equal height columns
body: <p>I've been given a design that has 4 columns that need to be of equal height. This alone isn't so bad and feel that I've been able to solve that problem with the One True Layout method referenced <a href="https://css-tricks.com/fluid-width-equal-height-columns/" rel="nofollow">here</a>:</p>
  
  <pre><code>&lt;style&gt;
      .row {
          overflow: hidden;
      }
  
      .block {
          margin-bottom: -99999px;
          padding-bottom: 99999px;
      }
  &lt;/style&gt;  
  
  
  &lt;div class="row"&gt;
      &lt;div class="block"&gt;
          &lt;div class="content"&gt;
              Content goes here, and each .block element should have the same height.
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="block"&gt;
          &lt;div class="content"&gt;
              Content goes here, and each .block element should have the same height.
          &lt;/div&gt;
      &lt;/div&gt;
      ...
  &lt;/div&gt;
  </code></pre>
  
  <p>However where it gets complicated is that these columns each have 3 rows inside of them, and I need each of these rows to be equal height with their cousins.
  ie. all the A divs need to be equal height, all the Bs equal to the largest B, etc.</p>
  
  <pre><code> ------------   ------------   ------------   ------------
  |            | |            |  |           |  |           |
  |     A1     | |     A2     |  |     A3    |  |     A4    |
  |            | |            |  |           |  |           |
   ------------   ------------   ------------   ------------
  |            | |            |  |           |  |           |
  |            | |            |  |           |  |           |
  |     B1     | |     B2     |  |     B3    |  |     B4    |
  |            | |            |  |           |  |           |
  |            | |            |  |           |  |           |
   ------------   ------------   ------------   ------------
  |     C1     | |     C2     |  |     C3    |  |     C4    |
  |            | |            |  |           |  |           |
   ------------   ------------   ------------   ------------
  </code></pre>
  
  <p>The content inside each block would just be text or an unordered list.</p>
  
  <p>I've found that I can make this work if I were to wrap all the As, Bs, and Cs together in one row with their respective blocks, but then I haven't been able to find a solution to make this responsive when going down to narrower breakpoints. All the As would stack on top of each other first, followed by the Bs together, then the Cs, when what I'm looking for is for the columns to all stay together, stacking as A1, B1, C1, A2, B2, C2, etc.</p>
  
  <p>I've also tried playing around with offsetting columns, and re-ordering them with the bootstrap push and pull classes, but nothing has worked.</p>
  
  <p>We also need to support IE9 for this site, so flexbox is out unfortunately.</p>
  
  <p>The diagram above is what the large viewport should display, with each column taking 3 columns from the bootstrap grid. The small viewport should go down to 2x2, 6 columns each, while extra-small would just have them stack one on top of another, taking the full 12 columns.</p>
  
  <p>Edit: I'd prefer a purely CSS solution, without resorting to tables if possible. But I'm not dead set against it, or ruling out Javascript.</p>