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 可能(而且确实)比 block1 高(高度更大)。

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)