Order columns through Bootstrap4

by

2021 – Bootstrap 5

The responsive ordering classes are now order-first, order-last and order-0 – order-5

Demo

2018 – Bootstrap 4

The responsive ordering classes are now order-first, order-last and order-0 – order-12


The Bootstrap 4 **push** **pull** classes are now `push-{viewport}-{units}` and `pull-{viewport}-{units}` and the `xs-` infix has been removed. To get the desired 1-3-2 layout on mobile/xs would be: [Bootstrap 4 push pull demo](http://www.codeply.com/go/OmrcmepbUp) (This only works pre 4.0 beta)

Bootstrap 4.1+

Since Bootstrap 4 is flexbox, it’s easy to change the order of columns. The cols can be ordered from order-1 to order-12, responsively such as order-md-12 order-2 (last on md, 2nd on xs) relative to the parent .row.

<div class="container">
    <div class="row">
        <div class="col-3 col-md-6">
            <div class="card card-body">1</div>
        </div>
        <div class="col-6 col-md-12 order-2 order-md-12">
            <div class="card card-body">3</div>
        </div>
        <div class="col-3 col-md-6 order-3">
            <div class="card card-body">2</div>
        </div>
    </div>
</div>

Demo: Change order using order-* classes

Desktop (larger screens):
enter image description here

Mobile (smaller screens):
enter image description here

It’s also possible to change column order using the flexbox direction utils…

<div class="container">
    <div class="row flex-column-reverse flex-md-row">
        <div class="col-md-8">
            2
        </div>
        <div class="col-md-4">
            1st on mobile
        </div>
    </div>
</div>

Demo: Bootstrap 4.1 Change Order with Flexbox Direction

Older version demos
demo – alpha 6
demo – beta (3)

See more Bootstrap 4.1+ ordering demos

Related
Column ordering in Bootstrap 4 with push/pull and col-md-12
Bootstrap 4 change order of columns

A-C-B A-B-C

More Related Contents:

  1. Bootstrap align navbar items to the right
  2. Change navbar color in Twitter Bootstrap
  3. What is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap?
  4. Center an element in Bootstrap Navbar
  5. Bootstrap 4 navbar with 2 rows
  6. Bootstrap Center Vertical and Horizontal Alignment
  7. How to change the bootstrap primary color?
  8. Remove gutter space for a specific div only
  9. How can I change the Bootstrap 4 navbar button icon color?
  10. Bootstrap with different order on mobile version
  11. How to build a 2 Column (Fixed – Fluid) Layout with Twitter Bootstrap?
  12. Meaning of numbers in “col-md-4″,” col-xs-1″, “col-lg-2” in Bootstrap
  13. Bootstrap grid with fixed wrapper – Prevent columns from stacking up
  14. What is class=”mb-0″ in Bootstrap 4?
  15. Customize Bootstrap 4’s grid-system Breakpoints
  16. Bootstrap 4 – Navbar items outside the collapse
  17. Bootstrap change order of columns
  18. Nested rows with bootstrap grid system?
  19. Bootstrap 3: pull-right for col-lg only
  20. Offsetting columns is not working (Bootstrap v4.0.0-beta)
  21. Table column sizing
  22. How can I change the order of Bootstrap columns?
  23. Centering the image in Bootstrap
  24. Bootstrap 4 custom build generator / download [duplicate]
  25. Vertically align Bootstrap badge inside heading
  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. Bootstrap Grid System new line does not look nice

Leave a Comment