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: enter image description here

on "extra small" devices it should look like this

enter image description here

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

See this: http://stackoverflow.com/questions/18514922/reordering-divs-responsively-with-twitter-bootstrap?lq=1 — ganders, Jan 20 '14 at 19:03
That's not what I want, because this answer shows just a reordering but no "float: right" or "rowspan" from "B" when the device is not extra small. — user1895259, Jan 20 '14 at 19:30

score 13 · Accepted Answer · answered Jan 20 '14 at 19:53

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

That's exactly what I want to have! Thank you! – user1895259 Jan 20 '14 at 19:56 — user1895259, Jan 20 '14 at 19:56

Twitter Bootstrap 3 rowspan and reorder

1 Answers1

Linked