TL; DR：

Question

我使用Bootstrap 4获得以下HTML代码：

<div class="row">
  <div class="col-12 col-sm-4">
    First, but unordered
  </div>
  <div class="col-12 col-sm-4">
    Second, but unordered
  </div>
  <div class="col-12 col-sm-4 order-sm-1">
    Third, but first
  </div>
</div>

我希望将第三个div放在sm屏幕上的第一个位置，但事实并非如此。这是JSFiddle我错过了什么？谢谢！

Answer 1

TL; DR：

将您的标记更改为：

<div class="container">
  <div class="row">
    <div class="col-12 col-sm-4">
      First, but unordered
    </div>
    <div class="col-12 col-sm-4">
      Second, but unordered
    </div>
    <div class="col-12 col-sm-4 order-first order-md-0">
      Third, but first
    </div>
  </div>
</div>

详情

根据{{1}}中的行.order-sm-1，

order: 1会在元素上放置#53-#55：

_grid-framework.scss

但是将@for $i from 0 through $columns { .order#{$infix}-#{$i} { order: $i; } }放在一列而其他列没有order: 1的情况下会将该列发送到堆栈末尾，因为order的默认值为order 。任何没有0的兄弟姐妹都将被放置在您的专栏之前。

在同一个文件的第order行，我们找到#49（设置.order#{$infix}-first）。这将在其余部分之前放置一列，以及order:-1将其放置在所有其余部分之后。

总结一下：

使用.order#{$infix}-last和.order-sm-last将列放到堆栈的前面或后面
使用.order-sm-first为.order-sm-#{n}提供order，但在兄弟姐妹order上设置order-sm-1如果您放置order-sm-2（或order在其他列上更高 - 高达12）。

请注意，他们只为.order-sm-13定义了12个级别，sm将无效，除非您自己定义。

最后一点：如果您希望在order-sm-1 及以下订购色谱柱，则应将order-first order-md-0替换为.order-first。 .order-md-0会在所有时间间隔内首先显示order，并0将其md设置回<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <div class="container"> <div class="row"> <div class="col-12 col-sm-4"> First, but unordered </div> <div class="col-12 col-sm-4"> Second, but unordered </div> <div class="col-12 col-sm-4 order-first order-md-0"> Third, but first </div> </div> </div>及更高上的Angular，因此它会在布局中保留其位置：< / p>

ng-bootstrap

Answer 2

订单类并不是真正处理元素的顺序，而是像交换系统一样。所以你需要在其他div中声明一个订单

<div class="row">
  <div class="col-12 col-sm-4 order-sm-12">
    First, but unordered
  </div>
  <div class="col-12 col-sm-4 order-sm-12">
    Second, but unordered
  </div>
  <div class="col-12 col-sm-4 order-sm-1">
    Third, but first
  </div>
</div>

Here's a Fiddle

Answer 3

<强> EDITED

我正在更改代码，以便在用户评论@Andrei Gheorghiu之后将其改编为bootstrap 4

你可以使用class order-sm-first设置为order=-1，使用此代码，第三 div将首先显示为sm或更大的屏幕< strong>大于576px

<div class="row">
  <div class="col-12 col-sm-4">
    First, but unordered
  </div>
  <div class="col-12 col-sm-4">
    Second, but unordered
  </div>
  <div class="col-12 col-sm-4 order-sm-first">
    Third, but first
  </div>
</div>

在这里，您可以看到jsfiddle

的分叉版本

Boostrap 4网格重新排序

3 个答案:

TL; DR：

详情