html - Twitter Bootstrap 3 rowspan and reorder

Question

I try to achieve the following with twitter bootstrap:

on all screens except "extra small" the layout should look like this:

on "extra small" devices it should look like this

I already tried this soultion Reordering divs responsively with Twitter Bootstrap?, but it doesn't work, because there is no "rowspan" from "B" over "A" and "C".

So that means if "B" is larger than "A" there is a gap between "A" and "C". Is there any way to achieve this?

Best regards

Answer 1

Here's the answer. I added some inline style just to visualize this example.

http://jsfiddle.net/qVyLf/

<div class="row">
    <div class="col-sm-7" style="background: green; height: 300px;">
        <p>A</p>
    </div>
    <div class="col-sm-5 b-col" style="background: blue; height: 600px;">
        <p>B</p>
    </div>
    <div class="col-sm-7" style="background: red; height: 300px;">
        <p>C</p>
    </div>

</div>

@media (min-width: 768px) {
    .b-col {
        float: right;
    }
}