Twitter bootstrap 3 rowspan and reorder

Question

I am trying to do the following with twitter bootstrap:

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

on "extra small" devices it should look like this:

I already tried this soul Redefine divs using Twitter Bootstrap? but this doesn’t work because there is no “rowspan” from “B” over “B”, A "and" C ".

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

Regards

Answer 1

. , .

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;
    }
}