Bootstrap：将 div 从一列移动到另一列，移动设备的订单计数答案

【问题标题】：Bootstrap: move div from one column to another, order counts for mobile devicesBootstrap：将 div 从一列移动到另一列，移动设备的订单计数
【发布时间】：2017-01-09 09:01:30
【问题描述】：

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

没用。 另外，为两个块添加hidden-xs 和visible-xs

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

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

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

重要提示：块 3 可能（而且它）比块 1 更高（高度更大）。

【问题讨论】：

标签： javascript html css twitter-bootstrap grid

【解决方案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;
    }
}

【讨论】：

我不知道谁投了反对票……不是我……我喜欢你的回答，但是......遗憾的是，大型设备的 block2 比 block 3 低得多：jsfiddle.net/wr22s3qc 你看到它看起来很糟糕吗？
是的，hieght 有所作为。在大屏幕上为 float:right 添加一个特殊的类。 Updated example
酷，我会的。还请更新问题以表明第 3 块更高。仅当列较高时才需要正确的浮动。
问题已更新（添加了有关高度的信息） - 最后一句以粗体显示，位于图像下方。我很好奇谁对你的回答投了反对票。你的答案是正确的！
@ZimSystem 是的，浮动（（我们在这里就使用 CSS Grids 或 BS4 进行战斗。我使用的网格不多，但在我看来，我们将不得不使用 CSS Grid 实现 BS 列系统）会花费很多时间。所以我试图证明 BS4 还不错，但每个人都想要网格......

【解决方案2】：

使用网格的推拉属性将完成你的工作试试这个推拉将只适用于小型设备

    <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

【讨论】：

抱歉，对于大屏幕，您的代码 jsfiddle.net/5dkmx4vx 不正确，因为它在一行中显示所有块，但对于大型设备，block2 应该位于 block1 之下。
对不起，还是不一样。我会在一两分钟内附上图片。
这根本不起作用。 col-sm-*-12 将列推离屏幕。