【问题标题】：Boostrap 4 grid re-orderBootstrap 4 网格重新排序
【发布时间】：2018-01-22 09:56:46
【问题描述】：

我有以下使用 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 我错过了什么？谢谢！

【问题讨论】：

标签： css twitter-bootstrap bootstrap-4

【解决方案1】：

order 类并没有真正处理元素的顺序，而是像一个交换系统。所以你也需要在其他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

【讨论】：

谢谢！这引起了一些行动！现在要弄清楚为什么它与我想要的相反！我猜是移动优先设计。
可能是因为您使用的是小型设备尺寸w3schools.com/bootstrap/bootstrap_grid_small.asp
这不是交换系统。只是CSS中order属性的默认值是0。如果兄弟姐妹没有声明order，则使用任何将其设置为任何正值的类都会使该列成为最后一列。

【解决方案2】：

已编辑

在@Andrei Gheorghiu 的用户评论之后，我正在更改代码以使其适应 bootstrap 4

您可以使用将设置为order=-1 的类 order-sm-first，使用此代码 第三个 div 将首先显示为 sm 或更大含义的屏幕 大于 576 像素

<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

【讨论】：

order-sm-unordered 在 Bootstrap v4 中不存在。 order 确实有一个默认值。这是0。
你是对的，但我注意到在文档中没有关于 order-first 的参考，它将order 设置为-1，使用该订单值您不需要指定订单其他 div

【解决方案3】：

tl;博士：

将您的标记更改为：

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

详情

.order-sm-1 将根据#53-#55 in _grid-framework.scss 中的行order: 1 将order: 1 放在元素上：

@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-2（或更高 - 最多12）放在其他列上，order-sm-1 将首先创建一个列)。

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

最后一点：如果您希望列在sm 及以下 上排序，则应将order-sm-1 替换为order-first order-md-0。 .order-first 在所有间隔上都排在第一位，.order-md-0 在 md 及更高版本上将其 order 设置回 0，因此它在布局中保持其位置：

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

【讨论】：

但这是他们的 GA 代码。确定是我弄错了吗？我理解它是首先设计为移动设备的，所以也许我搞砸了 HTML？
实际上，我只是在他们的 SASS 中查找了一下，我会更新我的答案。 :)
@TheRealPapa，如果您有兴趣，我查看并详细解释了他们的 SCSS 被翻译成什么。