Bootstrap 4 Beta:响应行"1、2、3"到"2、1、3"； [英] Bootstrap 4 Beta: responsive rows "1, 2, 3" to "2, 1, 3"

问题描述

因此以下内容适用于4.alpha，但是我对在4.beta上解决它没有任何运气

So the following worked on 4.alpha but I am not having any luck figuring it out on 4.beta

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

当浏览器为medium (桌面)或更大的浏览器时，我想要该布局.

When the browser is medium (desktop) or larger I want that layout.

当浏览器小于medium时，我想要:

When the browser is smaller than medium, I would like:

• col-md-6 (#2) div位于第一行
• col-md-3 (#1)在其正下方
• 最底行的col-md-3 (#3)

• The col-md-6 (#2) div to be at the top row
• The col-md-3 (#1) directly below it
• The col-md-3 (#3) on the very bottom row

这是我为4.alpha工作的代码:

Here is the code that I had for 4.alpha that worked:

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

要在移动设备上进行此操作的方法是什么?

What is the method to get this to go 2|1|3 on mobile devices??

推荐答案

在Bootstrap 4 beta 3中，此功能由.order-类提供.在文档中，您可以在重新排序部分中找到它们.

In Bootstrap 4 beta 3 this feature is provided by the .order- classes. In the docs you can find them in the Reordering section.

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

So, in your concrete case it would look like this:

<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类的后缀，实际上是

Note: I'm not aware of the -unordered class suffix, and in fact, the css available from the official Bootstrap cdn does not contain any classes like that.

这篇关于Bootstrap 4 Beta:响应行"1、2、3"到"2、1、3"；的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！