Bootstrap 4 Beta: responsive rows “1, 2, 3” to “2, 1, 3”

问题

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

I am using a col-3 | col-6 | col-3 row layout.

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

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

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

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

回答1:

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

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.

来源：https://stackoverflow.com/questions/48291885/bootstrap-4-beta-responsive-rows-1-2-3-to-2-1-3

标签

bootstrap-4

twitter-bootstrap-4