我尝试使用 twitter bootstrap 实现以下目标:
在除“特小”之外的所有屏幕上,布局应如下所示:
在“超小”设备上它应该是这样的
我已经试过这个灵魂Reordering divs responsively with Twitter Bootstrap? ,但它不起作用,因为没有从“B”到“A”和“C”的“rowspan”。
这意味着如果“B”大于“A”,则“A”和“C”之间存在间隙。 有什么办法可以实现吗?
最好的问候
最佳答案
答案在这里。我添加了一些内联样式只是为了可视化此示例。
<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;
}
}
关于twitter-bootstrap - Twitter Bootstrap 3 rowspan 和重新排序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21241862/