Bootstrap 4 排序类

Question

我有一个关于 bootstrap 4.1 重新排序的问题。根据文档：

重新排序

使用 .order- 类来控制视觉顺序 你的内容。这些类是响应式的，因此您可以设置顺序 通过断点（例如，.order-1.order-md-2）。包括对 1 的支持 跨越所有五个网格层的 12 个。

我尝试仅在中小型屏幕上设置重新排序，使用文档中显示的.orderclasses，但它也会在较大的断点上重新排序内容，我做错了吗？

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12 col-lg-4 order-sm-2">
        <!-- some contents here -->
        </div>
        <div class="col-sm-12 col-lg-8 order-sm-1">
        <!-- some contents here -->
        </div>
    </div>
</div>

Answer 1

您需要在更大的断点中重新排序，因为引导程序是移动优先的方法，（这意味着它在媒体查询中使用min-width），所以当仅使用sm 时，它将应用sm 及以上的属性（包括md和lg）。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12 col-lg-4 order-sm-2 order-lg-1">
      mobile 2nd and then desktop 1st
    </div>
    <div class="col-sm-12 col-lg-8 order-sm-1 order-lg-2">
      mobile 1st and then desktop 2st
    </div>
  </div>
</div>

关于 BS4 中的order 的另一件事是，您可以使用order-X-first、order-X-last 和order-X-0，所以这里是这些类的sn-p。你可以在answer看到他们

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12 col-lg-4 order-sm-last order-lg-first">
      mobile 2nd and then desktop 1st
    </div>
    <div class="col-sm-12 col-lg-8 order-sm-first order-lg-last">
      mobile 1st and then desktop 2st
    </div>
  </div>
</div>

Answer 2

这是 Bootstrap 的默认行为，是预期的。

简而言之，所有引导程序的断点后缀 (-sm-md ...) 从该断点向上工作。

因此，如果您设置col-sm-6，则意味着您的列将是sm断点和md和lg中行大小的一半，除非您覆盖它（例如col-md-2）。

这一切都可以追溯到here（在媒体查询中使用最小宽度）

Answer 3

这是一个示例，您可以如何使用媒体查询来做到这一点：

<div class="row">
   <div class="col-12">
       <!-- some content -->
   </div>
   <div class="col-md-9">
       <!-- some content -->
   </div>
   <div class="col-md-3 move-down">
       <!-- some content -->
   </div>
   <div class="col-md-6 move-up">
       <!-- some content -->
   </div>
   <div class="col-md-6">
       <!-- some content -->
   </div>
</div>

@media (max-width: 767px) {
    .move-down {
        order: 2;
    }
    .move-up {
        order: 1;
    }
}

Answer 4

您是否尝试过 order-1，这将为大屏幕设置默认值

<div class="col-sm-12 col-lg-4 order-1 order-sm-2">
    <!-- some contents here -->
</div>
<div class="col-sm-12 col-lg-8 order-2 order-sm-1">
    <!-- some contents here -->
</div>

来源：Column ordering in Bootstrap 4

Answer 5

我也遇到了一些问题。以下是让它为我工作的代码：

 <div class="container-fluid">
            <div class="row">
                <div class="col-sm-6 order-sm-2 order-1">
                <!-- some contents here -->Content1
                </div>
                <div class="col-sm-6 order-sm-1 order-2">
                <!-- some contents here -->Content2
             </div>
       </div>
  </div>

编辑：从各个列中删除了 .order-md 类。