Twitter Bootstrap 3 行跨度和重新排序答案

【问题标题】：Twitter Bootstrap 3 rowspan and reorderTwitter Bootstrap 3 行跨度和重新排序
【发布时间】：2014-01-20 18:52:07
【问题描述】：

我尝试使用 twitter bootstrap 实现以下目标：

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

在“超小型”设备上应该是这样的

我已经尝试过这个灵魂Reordering divs responsively with Twitter Bootstrap?，但它不起作用，因为“A”和“C”上的“B”没有“行跨度”。

这意味着如果“B”大于“A”，则“A”和“C”之间存在间隙。有什么方法可以实现吗？

最好的问候

【问题讨论】：

看这个：stackoverflow.com/questions/18514922/…
这不是我想要的，因为当设备不是特别小时，此答案仅显示重新排序但没有“B”的“float：right”或“rowspan”。

标签： twitter-bootstrap html

【解决方案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;
    }
}

【讨论】：

这正是我想要的！谢谢！