1

If I have 2 divs and I want to show them in different orders depending on the screen size breakpoint do I have to specify the order for each size? eg

<div class="order-xs-2 order-sm-2 order-md-2 order-lg-1 order-xl-1">
<div class="order-xs-1 order-sm-1 order-md-1 order-lg-2 order-xl-2">

When I tried this they appeared correctly in all sizes apart from xs, where they were the wrong way round so I suspect I'm doing this wrong.

DarkW1nter
  • 2,933
  • 11
  • 67
  • 120

3 Answers3

1

Unlike the sizes that worked, there is no order-xs.

Scott Hunter
  • 48,888
  • 12
  • 60
  • 101
1

You only need to set the smallest breakpoints, the larger breakpoints are implied. Also, remember that the ordering classes use flexbox so they'll only work in a display:flex parent such as .row or .d-flex...

<div class="d-flex">
    <div class="order-2 order-lg-1">div 1</div>
    <div class="order-1 order-lg-2">div 2</div>
</div>

https://www.codeply.com/go/YZVC3UPvoG

-xs is no longer used in Bootstrap 4. The smallest breakpoint is the default, so it's just order-1, order-2 etc..

Also see: What is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap?

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
-1

Current available sizes are sm md lg xl if you want to set the order below sm size don't use size before order and override it with the size that you want

example

<div class="order-sm-2 order-1">
<div class="order-sm-1 order-2">
Mohamed Abdallah
  • 796
  • 6
  • 20