如何重新排序 Bootstrap 4 中的列？ [复制]答案

【问题标题】：How to re-order columns in Bootstrap 4? [duplicate]如何重新排序 Bootstrap 4 中的列？ [复制]
【发布时间】：2020-10-14 04:50:33
【问题描述】：

我对 bootstrap 还很陌生，在移动设备中调整大小时，我在重新排序列时遇到了麻烦。

到目前为止，这是我尝试过的：

<div class="container">
<div class="row">
    <div class="col-lg-5 order-lg-1">
        B
    </div>
    <div class="col-lg-5">
      <div class="col-lg-12 order-lg-0">
        A
      </div>
      <div class="col-lg-12 order-lg-2">
        C
      </div>
   </div>
</div>
</div>

我想要实现的是这样的： https://i.stack.imgur.com/9wPO6.jpg

当我在移动设备中运行代码并调整大小时，结果如下：乙一种 C

任何帮助将不胜感激！谢谢！

【问题讨论】：

你能显示 order-lg-x 类的 CSS 吗？或者创建一个堆栈闪电战？
不幸的是，没有，但我使用引导程序的隐藏元素解决了它。无论如何，谢谢！

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

您可以使用 Bootstrap Hidding Element 选项，也可以使用 Grid System 在移动设备 col-sm* 或 col-xs* 上应用。其他选项是使用Media Query 根据设备宽度和高度应用类。

基于您的代码的示例：

<div class="container">
    <div class="row">
        <div class="col-lg-6 col-md-6 order-md-2 order-lg-2 d-md-block d-sm-none d-xs-none d-none">
            B
        </div>
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
          <div class="col-lg-12 col-xs-12 col-sm-12 order-lg-1">
            A
          </div>
          <div class="col-lg-12 col-xs-12 col-sm-12 order-lg-2 d-block d-sm-none d-md-none">
            B
          </div>
          <div class="col-lg-12 col-xs-12 col-sm-12 order-lg-3">
            C
          </div>
       </div>
    </div>
</div>

【讨论】：

我确实尝试过使用隐藏元素并且效果很好。谢谢！

【解决方案2】：

您可以像这样简单地制作列。

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <div class="col-sm-12">
        A
      </div>
      <div class="col-sm-12">
        C
      </div>
    </div>
    <div class="col-sm-6">
        B
    </div>
   </div>
</div>

【讨论】：