twitter-bootstrap Twitter Bootstrap 3 行跨度和重新排序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21241862/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap 3 rowspan and reorder
提问by user1895259
I try to achieve the following with twitter bootstrap:
我尝试使用 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".
我已经尝试过使用 Twitter Bootstrap 响应式重新排序 div？，但它不起作用，因为在“A”和“C”上没有来自“B”的“rowspan”。
So that means if "B" is larger than "A" there is a gap between "A" and "C". Is there any way to achieve this?
所以这意味着如果“B”大于“A”，则“A”和“C”之间存在差距。有没有办法实现这一目标？
Best regards
最好的祝福
回答by Joe Conlin
Here's the answer. I added some inline style just to visualize this example.
这是答案。我添加了一些内联样式只是为了形象化这个例子。
<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;
}
}
