Bootstrap 4 ordering class

Question

I have a question about the bootstrap 4.1 reordering. According to the documentation:

Reordering

Use .order- classes for controlling the visual order of your content. These classes are responsive, so you can set the order by breakpoint (e.g., .order-1 .order-md-2). Includes support for 1 through 12 across all five grid tiers.

I've tried to set the reordering only on small and medium screens, using the .orderclasses as showed in the docs, but it will reorder the contents also on larger breakpoints, I'm doing this wrong?

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12 col-lg-4 order-sm-2">
        <!-- some contents here -->
        </div>
        <div class="col-sm-12 col-lg-8 order-sm-1">
        <!-- some contents here -->
        </div>
    </div>
</div>

dippas · Accepted Answer · 2018-06-30T14:18:39.780

13

You need re-order in larger breakpoints, because bootstrap is mobile first approach, (it means it is using min-width in media queries), so when only using sm it will apply properties from sm and up (including md and lg).

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12 col-lg-4 order-sm-2 order-lg-1">
      mobile 2nd and then desktop 1st
    </div>
    <div class="col-sm-12 col-lg-8 order-sm-1 order-lg-2">
      mobile 1st and then desktop 2st
    </div>
  </div>
</div>

One more thing to know about order in BS4, is that you can you use order-X-first, order-X-last and order-X-0, so here a snippet with those classes. You can see them in this answer

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12 col-lg-4 order-sm-last order-lg-first">
      mobile 2nd and then desktop 1st
    </div>
    <div class="col-sm-12 col-lg-8 order-sm-first order-lg-last">
      mobile 1st and then desktop 2st
    </div>
  </div>
</div>

edited Jun 30 '18 at 14:18

answered Jun 30 '18 at 13:48

dippas

58,591
15
114
126

1

So to clarify, it will display the order as 2 and then 1 only on smaller screens, right? And from small screens and above it displays 1 and then 2? – Rohan Mayya Jun 30 '18 at 13:52
just toggle `full page` in the snippet to see result but yes – dippas Jun 30 '18 at 13:53
This is the solution I've adopted, I was not considering the mobile first approach of the boostrap framework, so I have misunderstood how to correctly use the `.order` class utility – Jun 30 '18 at 14:00
I was trying the different solutions posted, Your answer is the most correct here after the update, The problem I has was about the wrong `.order` class use. I've tried to fix it using `.order-1 order-lg-2` and this worked, but I'm not too experienced with columns reordering in booststrap so I assume as you said in a comment that mine is the wrong way. – Jun 30 '18 at 14:23
you need to understand flexbox order, which bootstrap order is based – dippas Jun 30 '18 at 14:25
Your wording confused me, but your examples are very clear, +1. – orangecaterpillar Oct 18 '20 at 17:01

score 0 · Answer 2 · answered Jun 30 '18 at 13:51

This is the default behavior of Bootstrap and is expected.

To say it in short words, all bootstrap's breakpoint suffixes (-sm -md ...) work from that breakpoint upward.

So if you set col-sm-6 that means your column will be half the size of row from in sm breakpoint and md and lg unless you overwrite it (e.g. col-md-2 ).

It all goes back here (using min-width in media queries)

score 0 · Answer 3 · answered Nov 26 '21 at 22:53

Here is an example, how you can do this with media queries:

<div class="row">
   <div class="col-12">
       <!-- some content -->
   </div>
   <div class="col-md-9">
       <!-- some content -->
   </div>
   <div class="col-md-3 move-down">
       <!-- some content -->
   </div>
   <div class="col-md-6 move-up">
       <!-- some content -->
   </div>
   <div class="col-md-6">
       <!-- some content -->
   </div>
</div>

@media (max-width: 767px) {
    .move-down {
        order: 2;
    }
    .move-up {
        order: 1;
    }
}

score -1 · Answer 4 · edited Jun 30 '18 at 14:20

-1

Have you tried doing order-1, this sets the default for larger screens

<div class="col-sm-12 col-lg-4 order-1 order-sm-2">
    <!-- some contents here -->
</div>
<div class="col-sm-12 col-lg-8 order-2 order-sm-1">
    <!-- some contents here -->
</div>

Source: Column ordering in Bootstrap 4

edited Jun 30 '18 at 14:20

dippas

58,591
15
114
126

answered Jun 30 '18 at 13:46

Francis Albert Calas

51
1
13

Thanks, I've tried but it will order the columns in the wrong way. I've found a lot of peoples with the same problem but this question was solving my issue. https://stackoverflow.com/questions/48598915/bootstrap-4-ordering-classes-not-working – Jun 30 '18 at 13:53
Ahh I see. So it would have ignored the `order-2` attribute. – Francis Albert Calas Jun 30 '18 at 13:58
Yes, I've corrected your answer, this is the working solution who I've adopted. Thanks for the support! – Jun 30 '18 at 14:05
@user9741470 You can't/shoun't edit an answer just to make it correct and give it the accepted answer. And other thing you had in your snippet `order-sm` not `order`, so how come you edited this answer to this and then accepted?. Btw the `Have you tried doing order-1, this sets the default for larger screens` is wrong. because `order` is for extra-small screens and up. – dippas Jun 30 '18 at 14:14
Ohh, I see. Just trying to help. – Francis Albert Calas Jun 30 '18 at 14:23

Rohan Mayya · Answer 5 · 2018-06-30T14:23:40.063

-1

I ran into some issues with this as well. Here's the following code that got it to work for me:

 <div class="container-fluid">
            <div class="row">
                <div class="col-sm-6 order-sm-2 order-1">
                <!-- some contents here -->Content1
                </div>
                <div class="col-sm-6 order-sm-1 order-2">
                <!-- some contents here -->Content2
             </div>
       </div>
  </div>

Edit: Removed .order-md class from respective columns.

edited Jun 30 '18 at 14:23

answered Jun 30 '18 at 13:48

Rohan Mayya

196
1
2
12

1

you don't need the `order-md` here and doesn't answer OP's question, given OP wants to start at `sm` and change at `lg` – dippas Jun 30 '18 at 14:21
Yes I'm aware. Was trying to brute force a solution but forgot to clean up. Thanks. – Rohan Mayya Jun 30 '18 at 14:23

Bootstrap 4 ordering class

5 Answers5