Bootstrap 4 Beta：响应行“1、2、3”到“2、1、3”

Question

因此以下内容适用于 4.alpha 但我没有运气在 4.beta

上解决它

我正在使用 col-3 | col-6 | col-3 行布局。

当浏览器为 medium （桌面） 或更大时，我需要该布局。

当浏览器小于medium时，我想：

col-md-6(#2)div要在顶行
col-md-3(#1)正下方
最下面一行的col-md-3(#3)

这是我为 4.alpha 编写的有效代码：

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">#1</div>
        <div class="col-md-6 flex-first flex-md-unordered">#2</div>
        <div class="col-md-3 flex-third flex-md-unordered">#3</div>
    </div>
</div>

在移动设备上使用什么方法2|1|3？

Answer 1

在 Bootstrap 4 beta 3 中，此功能由 .order- classes 提供。在文档中，您可以在 Reordering 部分找到它们。

因此，在您的具体情况下，它看起来像这样：

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3 order-2 order-md-1">#1</div>
        <div class="col-md-6 order-1">#2</div>
        <div class="col-md-3 order-2">#3</div>
    </div>
</div>

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

注意：我不知道-unordered class后缀，事实上Bootstrap官方提供的css cdn不包含任何class就是这样。

Bootstrap 4 Beta：响应行“1、2、3”到“2、1、3”

Bootstrap 4 Beta: responsive rows "1, 2, 3" to "2, 1, 3"

bootstrap-4

twitter-bootstrap-4