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

Question

我有两个div col-lg-5 。 当视图端口更改为移动设备时，我想首先将第二个div作为顺序。 我在v4.0.0-beta.2中使用Bootstrap order-* class。

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

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

Answer 1

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

正如.order-first实际设置order: -1为第二个div，它保证第二个div在视觉上是第一个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对于完成这项工作非常重要。

Answer 2

编辑回答。

我知道了。 Bootstrap 4假设您正在为最小的设备屏幕（xs）进行开发，因此order-1旨在用于最小的设备（xs）。 order-sm-1表示对大小> = sm的所有设备使用它。 因此，您必须从最小设备（移动设备）的订单开始。 因此，您需要将第二个div中的内容设置为第一个div中的内容，反之亦然。 然后你告诉bootstrap：如果它是更大或相等的sm大小改变命令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">

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

问题描述

2 个解决方案

解决方案1
2 2017-12-16 00:27:47

解决方案2
0 2017-12-10 10:17:31

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

问题描述

2 个解决方案

解决方案1 2 2017-12-16 00:27:47

解决方案2 0 2017-12-10 10:17:31

解决方案1
2 2017-12-16 00:27:47

解决方案2
0 2017-12-10 10:17:31