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-类提供。在文档中，您可以在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类后缀，事实上，官方Bootstrap cdn中提供的css不包含任何类。

Bootstrap 4 Beta：响应行＆＃34; 1,2,3＆＃34;到＆＃34; 2,1,3＆＃34;

1 个答案: