Equal height divs kept together side-by-side always - css

Question

Using Bootstrap 3.x and creating a common 3 column layout. In desktop view I want all three divs in the same row and the same height. When shrunk down to the smallest width I want the first two divs to always remain next to each other but the third drop below. Always, the first two divs should be the same height. If the second div is shorter than the first, the third div ends up underneath the second, to the right of the first.
<div class="row">
<div class="col-sm-12 col-md-9">
<!-- keep these two divs together side by side and the same height -->
<div class="col-xs-6 col-sm-6 col-md-6">
this is panel one
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
this is panel two
</div>
</div>
<div class="col-sm-12 col-md-3">
<!-- this div should be beside the other two on large screens and drop below on xsmall screens -->
side bar ad
</div>
</div>
Here is another way to visualize the issue. The first two need to be the same height: http://www.bootply.com/29cNrJrEwT

Answer 1

Connie DeCinko, Hi there.
To have the divs flow like you ask here you would do that this way.
Here is the Fiddle.
You said that the first two blocks should have the same height so you would not have a issue with the 3rd block flowing below.
But, if say the second block is to be shorter than the first block then wrap the first 2 block in a row and also wrap the 3rd block in a row and add to the row for the 3rd block col-xs-12 so when on small screens it takes up the full width.
<div class="container">
<div class="row text-center">
<div class="col-xs-6 col-sm-4 block1"><h2>Block 1</h2></div>
<div class="col-xs-6 col-sm-4 block2"><h2>Block 2</h2></div>
<div class="col-xs-6 col-sm-4 block3"><h2>Block 3</h2></div>
</div>
</div>
If you do actually want to have the second block shorter.
Then you could do it this way.
Here is the Fiddle.
Note this is not using Flex ... Flex does not have full browser support.
<div class="container">
<div class="row-fluid col-xs-12 col-sm-8 text-center clear">
<div class="col-xs-6 col-sm-6 block4"><h2>Block 1</h2></div>
<div class="col-xs-6 col-sm-6 block5"><h2>Block 2</h2></div>
</div>
<div class="row-fluid col-xs-12 col-sm-4 text-center clear">
<div class="col-xs-6 col-sm-12 block6 "><h2>Block 3</h2></div>
</div>
</div>

Answer 2

Flexbox was created for this. Literally.
http://jsfiddle.net/rudiedirkx/6ka86vfx/
Define a flex container with display: flex
Tell its children to flex: 1
Except the bigger children, they're flex: 3 in this case
Children can be flex containers too
It's children have flex: 1 again, to make them equal size
Your class names aren't the most descriptive, but the CSS is otherwise very simple:
.row { /* flex container */
display: flex;
}
.row > div { /* all its children */
flex: 1;
}
.row > div:first-child { /* one of its children is bigger (3:1) and is a flex container itself */
display: flex;
flex: 3;
}
.row > div:first-child > div { /* all its children are equal size */
flex: 1;
}