如何更改 Bootstrap 3 div 列顺序答案

【问题标题】：How do I change Bootstrap 3 div column order如何更改 Bootstrap 3 div 列顺序
【发布时间】：2018-05-01 18:05:14
【问题描述】：

做我的第一个响应式设计，在引导程序 3 中可能会出现这样的情况。在 lg 上更改：

[a] [     ]
[b] [  c  ]
    [     ]

到这个关于 sm:

[a]
[c]
[b]

【问题讨论】：

你可以使用 hidden-sm 类 - 在这里查看参考getbootstrap.com/css/#responsive-utilities
您希望 [ c ] 堆叠在 sm 上。那么sm中的顺序不应该是[a][b][c]吗？由于 c 和 b 处于同一层，所以如果它在小屏幕上向下堆叠，它将低于 b。
c 和 b 不在同一层级，它和 A 和 B 的 div 在同一层级

标签： html css twitter-bootstrap

【解决方案1】：

您可以使用两个 div。一个用于第一类布置，另一个用于第二类布置。第一个只显示在lg中，最后一个只显示在sm中。

<div class="hidden-sm">

</div>

<div class="hidden-lg">

</div>

【讨论】：

我正在考虑这个问题。隐藏元素也是正确的方法吗？他们可以是其他任何方法吗？
为了响应能力，您可以根据需要添加类，如 col-lg-8 之类。
隐藏 div 没有问题。这是我知道的解决方案。
引导支持，即仅 9 和 9+。所以它只支持 9 和 9+

【解决方案2】：

在您的 HTML 标记中，将 [c] 放在 [a] 和 [b] 之间。将类“pull-left”添加到 a 和 b。将类“pull-right”添加到 c。最后，将它们包含在定义断点的 div 中，例如 class='col-sm-12 col-md-12'。

【讨论】：

我还有一个问题要问你，如果我想在 sm 上获取 [b][c][a] 怎么办，是否可以使用 html 和 bootstarp 方法做到这一点？
将问题标记为已回答，以供可能出现的其他人使用。关于第二个问题，我不太明白...... col-sm-12 类处理了这个问题。除非你想要更小的 div？使用较小的数字代替 12。

【解决方案3】：

您可以在 C 列上使用 pull-right... 在移动设备上使用 A-C-B。

<div class="row">
     <div class="a col-lg-6">
        A
     </div>
     <div class="c col-lg-6 pull-right">
        B
     </div>
     <div class="b col-lg-6">
        C
     </div>
</div>

演示：http://bootply.com/9UNb9Q37G0

【讨论】：