Bootstrap change order of columns

by

Bootstrap 5 (update 2021)

Since flexbox is still used in Bootstrap 5, changing the order of columns works in the same way. However the order-6 to order-12 have been dropped. These classes are now available for re-ordering in Bootstrap 5..

  • order-{breakpoint}-first
  • order-{breakpoint}-last
  • order-{breakpoint}-0
  • order-{breakpoint}-1
  • order-{breakpoint}-2
  • order-{breakpoint}-3
  • order-{breakpoint}-4
  • order-{breakpoint}-5

The possible {breakpoint} values are none(for xs), sm, md, lg, xl or xxl

Bootstrap 5 order examples

Bootstrap 4 (update 2018)

There’s no need for extra CSS. Use the flexbox ordering utils…

Demo: https://codeply.com/go/nEpPysXuNe

<div class="contents">
  <div class="row row-1">
    <div class="col-sm-6">Content Left</div>
    <div class="col-sm-6">Content Right</div>
  </div>
  <div class="row row-2">
    <div class="col-sm-6">Content Right</div>
    <div class="col-sm-6 order-first">Content Left</div>
  </div>
  <div class="row row-3">
    <div class="col-sm-6">Content Left</div>
    <div class="col-sm-6">Content Right</div>
  </div>
  <div class="row row-4">
    <div class="col-sm-6">Content Right</div>
    <div class="col-sm-6 order-first">Content Left</div>
  </div>
</div>

The ordering class are now order-first, order-1, order-2, etc…

https://codeply.com/go/DYHIdw8TXH

Another method is using the flexbox direction utils…

<div class="row flex-row-reverse flex-md-row">
    <div class="col-6">A</div>
    <div class="col-6">B</div>
</div>

https://codeply.com/go/bi01mV3n0n

More Related Contents:

  1. Vertical Align Center in Bootstrap 4 [duplicate]
  2. Bootstrap align navbar items to the right
  3. Bootstrap 4 navbar with 2 rows
  4. How can I change the order of Bootstrap columns?
  5. Change navbar color in Twitter Bootstrap
  6. Order columns through Bootstrap4
  7. What is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap?
  8. Center an element in Bootstrap Navbar
  9. How to change the bootstrap primary color?
  10. Remove gutter space for a specific div only
  11. What do “flex” and “justify-content” achieve that “text-align” doesn’t?
  12. Bootstrap 4 masonry layout utilizing flexbox grid
  13. How can I change the Bootstrap 4 navbar button icon color?
  14. Bootstrap with different order on mobile version
  15. How to build a 2 Column (Fixed – Fluid) Layout with Twitter Bootstrap?
  16. Search input with an icon Bootstrap
  17. Customize Bootstrap 4’s grid-system Breakpoints
  18. Bootstrap 3: pull-right for col-lg only
  19. Offsetting columns is not working (Bootstrap v4.0.0-beta)
  20. Table column sizing
  21. Bootstrap 4 card-deck with number of columns based on viewport
  22. Bootstrap 4 custom build generator / download [duplicate]
  23. how to change bootstrap version 4 button color
  24. Vertically align Bootstrap badge inside heading
  25. ml-auto is not pushing navbar links to the right
  26. How do I make card-columns order horizontally?
  27. How to use CSS position sticky to keep a sidebar visible with Bootstrap 4
  28. How to make a Bootstrap 4 full width dropdown in Navbar?
  29. Bootstrap Navbar list items/links not showing
  30. Centering the navbar content in Bootstrap 4 (alpha 5)

Leave a Comment