html - 如何重新排序 Bootstrap 4 中的列？

Question

我对引导程序还很陌生，在移动设备中重新调整大小时，我一直无法重新排序列。

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

<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

当我在移动设备中运行代码并调整大小时，结果是这样的：B A C

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

标签： htmlcsstwitter-bootstrapbootstrap-4

Answer 1

您可以使用 Bootstrap隐藏元素选项，也可以使用网格系统在移动设备 col-sm* 或 col-xs* 上应用。其他选项是使用媒体查询根据设备宽度和高度应用类。

基于您的代码的示例：

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