Bootstrap：将div从一列移动到另一列，为移动设备计数

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 

移动设备？

P.S。当然，在我问我之前，我先看了看这些问题：

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

它没有帮助。 另外，为两个

块添加hidden-xs和visible-xs

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

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

有什么建议吗？谢谢。 例：

重要提示：第​​3块可能比（更高）更高（高度更高）。

Answer 1

使用网格的推拉属性将完成您的工作尝试此推送和拉动将仅适用于小型设备

    <div class="row">
        <div class="col-lg-3">block1 with IDs and classes</div>
        <div class="col-lg-3 col-sm-push-12">block2 with IDs and classes</div>
        <div class="clearfix visible-lg-block"></div>
        <div class="col-lg-6 col-sm-pull-12">block3 with IDs and classes</div>
    </div>

编辑为大型设备添加的clearfix

Answer 2

无需使用推/拉。想想＆＃34;移动优先＆＃34; ..

 <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）