Bootstrap with different order on mobile version

by

Because Bootstrap 4 uses flexbox, the columns are always going to be equal height, and you’ll not be able to get the desktop (lg) layout that you want.

One option is to disable the flexbox for lg. Use floats so that the 1,3 columns naturally pull to the right, since 2 is taller. The flexbox order- will work on mobile.

https://codeply.com/go/8lsFAU3C5E

<div class="container">
    <div class="row d-flex d-lg-block">
         <div class="col-lg-8 order-1 float-left">
            <div class="card card-body tall">2</div>
        </div>
        <div class="col-lg-4 order-0 float-left">
            <div class="card card-body">1</div>
        </div>
        <div class="col-lg-4 order-1 float-left">
            <div class="card card-body">3</div>
        </div>
    </div>
</div>

How this works

  • Keep columns in the same row, since ordering is relative to parent
  • The d-flex d-lg-block disables flex on lg and up
  • The float-left float the columns when flex is disabled
  • The order-* reorder the columns when flex is enabled

Another option is some flexbox wrapping hack that uses w-auto…

https://codeply.com/go/mKykCsBFDX

Also see:
How to fix unexpected column order in bootstrap 4?
Bootstrap Responsive Columns Height

B-A-C -> A-B-C

More Related Contents:

  1. Vertical Align Center in Bootstrap 4 [duplicate]
  2. Bootstrap align navbar items to the right
  3. Change navbar color in Twitter Bootstrap
  4. Order columns through Bootstrap4
  5. What is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap?
  6. Center an element in Bootstrap Navbar
  7. Bootstrap 4 navbar with 2 rows
  8. Bootstrap Center Vertical and Horizontal Alignment
  9. How to change the bootstrap primary color?
  10. How can I change the Bootstrap 4 navbar button icon color?
  11. How to build a 2 Column (Fixed – Fluid) Layout with Twitter Bootstrap?
  12. Search input with an icon Bootstrap
  13. What is class=”mb-0″ in Bootstrap 4?
  14. Customize Bootstrap 4’s grid-system Breakpoints
  15. Bootstrap 4 – Navbar items outside the collapse
  16. Bootstrap change order of columns
  17. Bootstrap 3: pull-right for col-lg only
  18. Offsetting columns is not working (Bootstrap v4.0.0-beta)
  19. Table column sizing
  20. Bootstrap 4 card-deck with number of columns based on viewport
  21. How can I change the order of Bootstrap columns?
  22. Centering the image in Bootstrap
  23. Bootstrap 4 custom build generator / download [duplicate]
  24. how to change bootstrap version 4 button color
  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. Centering the navbar content in Bootstrap 4 (alpha 5)

Leave a Comment