Bootstrap equal height rows inside equal height columns

Question

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 here:

<style>
 .row {
 overflow: hidden;
 }
 .block {
 margin-bottom: -99999px;
 padding-bottom: 99999px;
 }
</style> 
<div class="row">
 <div class="block">
 <div class="content">
 Content goes here, and each .block element should have the same height.
 </div>
 </div>
 <div class="block">
 <div class="content">
 Content goes here, and each .block element should have the same height.
 </div>
 </div>
 ...
</div>

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.

 ------------ ------------ ------------ ------------
| | | | | | | |
| A1 | | A2 | | A3 | | A4 |
| | | | | | | |
 ------------ ------------ ------------ ------------
| | | | | | | |
| | | | | | | |
| B1 | | B2 | | B3 | | B4 |
| | | | | | | |
| | | | | | | |
 ------------ ------------ ------------ ------------
| C1 | | C2 | | C3 | | C4 |
| | | | | | | |
 ------------ ------------ ------------ ------------

The content inside each block would just be text or an unordered list.

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.

I've also tried playing around with offsetting columns, and re-ordering them with the bootstrap push and pull classes, but nothing has worked.

We also need to support IE9 for this site, so flexbox is out unfortunately.

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.

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.

• Nursultan Zarlyk: Use JavaScript! May the Force be with you.
• Marko Kalic: @NursultanZarlyk That's definitely crossed my mind, along with using some crazy markup with tables and media queries to selectively define when a div should become a table row. I'd prefer a purely CSS solution if it exists, but definitely I'm not against using JavaScript.
• Tim Lewis: The page you linked (positioniseverything.net/articles/onetruelayout/example/…) returns a 404 error. Please ensure that all links provided are working/navigable.
• Marko Kalic: @TimLewis Thanks for letting me know, not sure what happened there. I've updated the link to css-tricks.com/fluid-width-equal-height-columns which is how I found it in the first place.

Answer 1

Although this may be a bit more work, you could define these as three separate columns, all within one row. For example:

 <div class="row">
 <div class="col-xs-12 col-sm-4">
 <div class="row A">
 <div class="col-xs-12">
 A1
 </div>
 </div>
 <div class="row B">
 <div class="col-xs-12">
 B1
 </div>
 </div>
 <div class="row C">
 <div class="col-xs-12">
 C1
 </div>
 </div>
 </div>
 <div class="col-xs-12 col-sm-4">
 <div class="row A">
 <div class="col-xs-12">
 A2
 </div>
 </div>
 <div class="row B">
 <div class="col-xs-12">
 B2
 </div>
 </div>
 <div class="row C">
 <div class="col-xs-12">
 C2
 </div>
 </div>
 </div>
 <div class="col-xs-12 col-sm-4">
 <div class="row A">
 <div class="col-xs-12">
 A3
 </div>
 </div>
 <div class="row B">
 <div class="col-xs-12">
 B3
 </div>
 </div>
 <div class="row C">
 <div class="col-xs-12">
 C3
 </div>
 </div>
 </div>
</div>

And the following css:

.A{
 height:50px;
}
.B{
 height:90px;
}
.C{
 height:40px;
}

Here is a jsfiddle to show you what I'm trying to do. Let me know if this is what you were looking for.

Here is a jsfiddle with JQuery that should solve your problem.

• Marko Kalic: I'd been trying that a bit, but found that where it falls apart is when A1, A2, and A3 don't share the same parent. So if A2 for example had 5 lines worth of text, I'd need A1 and A3 to have the same height as A2 even if they only had one line of text. And any solutions I've managed to come up with for equal height require a shared parent.
• Jacob Morris: If you have staic text, you should be able to alter the height property in css to the height you need, based on the amount of text. However, if your text is being entered dynamically and may change, this may not always work. If the text does not fit into the height specified, that column will expand, altering the height.
• Marko Kalic: The fixed height doesn't really work in the case where the content inside is long enough to make the div taller than its defined height. And the content is going to be dynamic so I can't really rely on that. But otherwise, yes, that's exactly what I'm aiming to do.
• Jacob Morris: I've updated my answer with some JQuery. I had no answer for solely CSS, sorry :(
• Marko Kalic: Not a problem! I'm quickly starting to believe that a CSS solution just isn't possible. At least not without some messy markup and media queries (dynamically choose which of many nested divs should be defined as a table-row per breakpoint) or JavaScript.