订单不起作用 Bootstrap v4.0.0-beta.2答案

【问题标题】：Order not working Bootstrap v4.0.0-beta.2订单不起作用 Bootstrap v4.0.0-beta.2
【发布时间】：2017-12-16 18:04:48
【问题描述】：

我有两个带有col-lg-5 的 div。当查看端口更改为移动设备时，我想先将第二个 div 作为订单。我在 v4.0.0-beta.2 中使用 Bootstrap order-* 类。

<div class="col-lg-5 col-12 order-col-12">
    [first_div]
</div>

<div class="col-lg-5  background-10 col-12  order-col-1">
    [second_div]
</div>

但在小型设备中，当我使用 col 时，应该更改如下：

<div class="col-lg-5  background-10 col-12  order-col-1">
    [second_div]
</div>

<div class="col-lg-5 col-12 order-col-12">
    [first_div]
</div>

但它并没有改变，它保持相同的顺序。

【问题讨论】：

仅供参考：.order-col-* 在 Bootstrap 中不存在。在默认的xs 大小下，您可以使用.order-12，而.order-sm-12、.order-md-12 等……在以后的阶段。与.col 类相同：在xs 它只是.col-1，而在其他断点处您明确定义断点，例如.col-md-1.

标签： twitter-bootstrap twitter-bootstrap-4-beta

【解决方案1】：

我认为最简单的解决方案是在您的第二个 div 上使用 order-first order-lg-2 类。当然，如果您希望在除 lg 之外的某个制动点更改列顺序，那么您也可以使用可用的 .order{-sm|-md|-lg|-xl}-2 类之一。

由于.order-first实际上为第二个div设置了order: -1，它保证了第二个div在视觉上是第一个，所以不需要在第一个div上显式设置顺序。（.order-1 不会出现这种情况！）
此外，由于 Bootstrap 具有移动优先的思维方式，我们必须添加一个 .order{-sm|-md|-lg|-xl}-2 类来设置更宽屏幕上列的“原始”顺序。

<div class="container">
    <div class="row">
        <div class="col-lg-5">
            [first_div]
        </div>

        <div class="col-lg-5 order-first order-lg-2">
            [second_div]
        </div>
    </div>
</div>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

注意：当然你有这个，但你的实际例子错过了.row——并且为了正确格式化.container——包装器。 .row 对完成这项工作很重要。

【讨论】：

【解决方案2】：

已编辑答案。

我明白了。 Bootstrap 4 假定您正在为最小的设备屏幕 (xs) 进行开发，因此 order-1 旨在用于最小的设备 (xs)。 order-sm-1 表示将其用于所有尺寸 >= sm 的设备。因此，您必须从订购最小的设备（移动设备）开始。因此，您需要将第二个 div 的内容设置为第一个 div 的内容，反之亦然。然后你告诉 bootstrap：如果大于等于 sm size 就改单order-sm-12。

总结一下：使用 bootstrap 4，您可以从较小的屏幕尺寸 (xs) 开始开发，并为更大或相等的设备（sm、md、xl）定义断点。

<div class="row">
  <div class="col-lg-5 col-12 order-sm-12">
    [content_second_div]
  </div>
  <div class="col-lg-5 background-10 col-12  order-sm-1">
    [content_first_div]
 </div>
</div>

阅读此处了解更多信息： https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints

还要确保您的 <head> 包含

 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

【讨论】：

我已经包装好了，但它仍然无法与 order-sm-1 一起使用。如果没有 order-col-*，那么对于超小型设备该怎么办？因为 Bootstrap 4 使用 col 而不是 xs。