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

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
Abela
  • 1,225
  • 3
  • 19
  • 42
  • Possible duplicate of [Column ordering in Bootstrap 4](https://stackoverflow.com/questions/37814508/column-ordering-in-bootstrap-4) – Carol Skelly Jan 18 '18 at 13:09

1 Answers1

3

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.

dferenc
  • 7,918
  • 12
  • 41
  • 49
  • 1
    Ah, that `order-md-1` is what I was missing in my testing. I had the `order-#` but not that `order-md-1` on the #1 row. Thanks @dferenc Marked as answered. – Abela Jan 17 '18 at 22:21