Order not working Bootstrap v4.0.0-beta.2

Question

I have two divs with col-lg-5. I want to make the second div as order first when view port change to mobile devices. I am using Bootstrap order-* class in v4.0.0-beta.2.

<div class="col-lg-5 col-12 order-col-12">
    [first_div]
</div>

<div class="col-lg-5  background-10 col-12  order-col-1">
    [second_div]
</div>

But in small devices when I use col this should be change like:

<div class="col-lg-5  background-10 col-12  order-col-1">
    [second_div]
</div>

<div class="col-lg-5 col-12 order-col-12">
    [first_div]
</div>

But its not changing and it remains in the same order.

FYI: `.order-col-*` does not exists in Bootstrap. At the default `xs` size you can use `.order-12`, while `.order-sm-12`, `.order-md-12` etc… at later stages. Same with the `.col` classes: at `xs` it is simply `.col-1`, while at other breakpoints you define the breakpoint explicitly, e.g. `.col-md-1`. — dferenc, Dec 16 '17 at 00:37

score 2 · Answer 1 · answered Dec 16 '17 at 00:27

I think the simplest solution is to use the order-first order-lg-2 classes on your second div. Of course if you wish to change the column order at a brakepoint other than lg, than you could use one of the available .order{-sm|-md|-lg|-xl}-2 classes as well.

As .order-first actually sets order: -1 for the second div, it guarantees that the second div will visually be the first one, so there is no need to set the order explicitly on the first div. (This would not be the case with .order-1!)
Also, as Bootstrap has a mobile-first mindset, we have to add one of the .order{-sm|-md|-lg|-xl}-2 classes to set the “original” ordering of the columns on wider screens.

<div class="container">
    <div class="row">
        <div class="col-lg-5">
            [first_div]
        </div>

        <div class="col-lg-5 order-first order-lg-2">
            [second_div]
        </div>
    </div>
</div>

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

Note: for sure you have that, but your actual example misses the .row –and for proper formatting the .container– wrappers. The .row is important to make this work.

Daniel · Answer 2 · 2017-12-10T11:00:51.523

Edited answer.

I see. Bootstrap 4 assumes that you are developing for the smallest device screen (xs) so order-1 is meant to be used for the smallest device (xs). order-sm-1 means use this for all devices with size >= sm. So you have to begin with the order for the smallest devices (mobile). Therefore you need to set the content from the second div as the content from the first div and vise versa. Then you tell bootstrap: If it is bigger or equal sm size change order order-sm-12.

To sum up: With bootstrap 4 you start developing from the smalles screen size (xs) and define your breakpoints for devices bigger or equal (sm, md, xl).

<div class="row">
  <div class="col-lg-5 col-12 order-sm-12">
    [content_second_div]
  </div>
  <div class="col-lg-5 background-10 col-12  order-sm-1">
    [content_first_div]
 </div>
</div>

Read here for more information: https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints

Also make sure that your <head> contains

 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

I already wrapped ,but it still not working with order-sm-1 .If there is no order-col-* ,then what to use for extra small devices ? as Bootstrap 4 uses col instead of xs. — PSA, Dec 10 '17 at 10:24

Order not working Bootstrap v4.0.0-beta.2

2 Answers2