如何修复引导程序 4 中意外的列顺序？答案

【问题标题】：How to fix unexpected column order in bootstrap 4?如何修复引导程序 4 中意外的列顺序？
【发布时间】：2018-08-24 16:32:13
【问题描述】：

我正在尝试制作如下布局：

在xs 设备上，我希望顺序是第一-第二-第三。

我的示例代码是：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'/>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <style type="text/css">
     div.short  { height: 100px; background-color: rgb(174, 199, 232); }
     div.medium { height: 200px; background-color: rgb(255, 187, 120); }
     div.tall   { height: 400px; background-color: rgb(152, 223, 138); }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-sm-4 short order-sm-9">
          First column (short)
        </div>
        <div class="col-sm-8 medium order-sm-1">
          Second column (medium)
        </div>
        <div class="col-sm-4 tall">
          <p>Third column (tall)</p>
          <p>
            How to keep this <em>under</em> the first (blue) column
            when on <code>sm</code> or larger devices, while
            preserving the first-second-thrid order on <code>xs</code>
            devices?
          </p>
          <p>
            And why are these narrower columns on the left, rather
            than right?
          </p>
        </div>
      </div>
  </body>
</html>

发生的情况是第一列和第三列倒置在左侧。

【问题讨论】：

标签： css flexbox bootstrap-4

【解决方案1】：

Bootstrap 4 使用 flexbox，因此列的高度始终相同，您将无法在更大的屏幕上获得所需的布局。解决方案是禁用sm 及以上的弹性框。使用浮点数，使第 3 个较高的列向右浮动。 flexbox order- 可以在移动设备上运行 (xs)。

https://codeply.com/go/c31HUTtXra

<div class="container">
    <div class="row d-sm-block">
        <div class="float-left col-sm-8 medium order-2">
            Second column (medium)
        </div>
        <div class="float-left col-sm-4 short order-1">
            First column (short)
        </div>
        <div class="float-left col-sm-4 tall order-3">
            <p>Third column (tall)</p>
            ..
        </div>
    </div>
</div>

d-sm-block 在 sm 上禁用 flexbox
float-left 在禁用 flexbox 时浮动列，以便高列向右环绕
order-* 在移动设备上获得所需的订单

【讨论】：