Twitter Bootstrap 3 rowspan并重新排序

Question

我尝试使用twitter bootstrap实现以下功能：

在除“额外小”之外的所有屏幕上，布局应如下所示：

在“超小”设备上它应该看起来像这样

我已经尝试了这个灵魂Reordering divs responsively with Twitter Bootstrap?，但它没有用，因为“B”上没有“行”，而是“A”和“C”。

这意味着如果“B”大于“A”，则“A”和“C”之间存在间隙。 有没有办法实现这个目标？

祝你好运

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