javascript - Bootstrap : move div from one column to another, 移动设备订单计数

Question

<div class="row">
    <div class="col-lg-7">
        <div>block1 with IDs and classes</div>
        <div>block2 with IDs and classes</div>
    </div>
    <div class="col-lg-5">
        <div>block3 with IDs and classes</div>
    </div>
</div>

如何让它看起来像

block1 
block3 
block2 

移动设备？

附注当然，在问我的问题之前，我先看了一下这些问题:

SO: How do I change Bootstrap 3 column order on mobile layout?

这没有帮助。 另外，为两个 block 添加 hidden-xs 和 visible-xs

<div>block2 with IDs and classes</div>

在不同的地方没有帮助，因为 ID 在页面上应该是唯一的。

有什么建议吗？谢谢。 例子:

重要提示: block 3 可能(并且确实)比 block 1 更高(高度更大)。

Answer 1

无需使用推/拉。想想“移动优先”..

 <div class="row">
        <div class="col-lg-7">
            <div>block1</div>
        </div>
        <div class="col-lg-5">
            <div>block3</div>
        </div>
        <div class="col-lg-7">
            <div>block2</div>
        </div>
 </div>

http://www.codeply.com/go/jgvSJrMOnk

如果 block 3 比其他列高，请创建一个特殊的类以使其在大屏幕上向右浮动。

@media (min-width:1200px) {
    .pull-lg-right {
      float:right;
    }
}

相关:
How do I change Bootstrap 3 div column order
Bootstrap with different order on mobile version ( Bootstrap 4)