Bootstrap 4 ordering class
Bootstrap 4 ordering class
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.
.order-1
.order-md-2
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?
.order
<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>
4 Answers
4
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).
min-width
sm
sm
md
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
order
order-X-first
order-X-last
order-X-0
<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>
just toggle
full page in the snippet to see result but yes– dippas
Jun 30 at 13:53
full page
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– user9741470
Jun 30 at 14:00
.order
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.– user9741470
Jun 30 at 14:23
.order
.order-1 order-lg-2
you need to understand flexbox order, which bootstrap order is based
– dippas
Jun 30 at 14:25
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.
-sm
-md
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 ).
col-sm-6
sm
md
lg
col-md-2
It all goes back here (using min-width in media queries)
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
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. stackoverflow.com/questions/48598915/…
– user9741470
Jun 30 at 13:53
Ahh I see. So it would have ignored the
order-2 attribute.– Francis Albert Calas
Jun 30 at 13:58
order-2
Yes, I've corrected your answer, this is the working solution who I've adopted. Thanks for the support!
– user9741470
Jun 30 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 at 14:14
order-sm
order
Have you tried doing order-1, this sets the default for larger screens
order
Ohh, I see. Just trying to help.
– Francis Albert Calas
Jun 30 at 14:23
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.
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 at 14:21
order-md
sm
lg
Yes I'm aware. Was trying to brute force a solution but forgot to clean up. Thanks.
– Rohan Mayya
Jun 30 at 14:23
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
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 at 13:52