How to fix unexpected column order in bootstrap 4?

by

Bootstrap 4 uses flexbox, so the columns are always going to be equal height, and you’ll not be able to get the layout that you want on larger screens. The solution is to disable the flexbox for sm and up. Use floats so that the 3rd taller column floats to the right. The flexbox order- will work on mobile (xs).

https://codeply.com/go/c31HUTtXra

<div class="container">
    <div class="row d-sm-block">
        <div class="float-left col-sm-8 medium order-2">
            Second column (medium)
        </div>
        <div class="float-left col-sm-4 short order-1">
            First column (short)
        </div>
        <div class="float-left col-sm-4 tall order-3">
            <p>Third column (tall)</p>
            ..
        </div>
    </div>
</div>
  • d-sm-block disables flexbox on sm an up
  • float-left to float the columns when flexbox is disabled so that the tall columns wraps to the right
  • order-* to get the desired order on mobile

Related:
Bootstrap with different order on mobile version
Empty vertical space between columns in Bootstrap 4

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. What do “flex” and “justify-content” achieve that “text-align” doesn’t?
  5. Bootstrap 4 masonry layout utilizing flexbox grid
  6. Bootstrap change order of columns
  7. How can I change the order of Bootstrap columns?
  8. ml-auto is not pushing navbar links to the right
  9. Make a div span two rows in a grid
  10. What’s the difference between align-content and align-items?
  11. Order columns through Bootstrap4
  12. Center an element in Bootstrap Navbar
  13. What does flex: 1 mean?
  14. Margin collapsing in flexbox
  15. How to change flexbox wrap?
  16. Create a Masonry grid with flexbox (or other CSS)
  17. css grid of squares with flexbox
  18. Set flexbox children to have different heights to use up available space
  19. Customize Bootstrap 4’s grid-system Breakpoints
  20. What are allowed values of the `display` property for a flex-item? (layout of flex-item’s children is irrelevant)
  21. Offsetting columns is not working (Bootstrap v4.0.0-beta)
  22. Without media queries how to achieve 3 column desktop to 1 column mobile layout
  23. Bootstrap 4 custom build generator / download [duplicate]
  24. The difference between flex:1 and flex-grow:1
  25. How do I set distance between flexbox items?
  26. How to stretch children to fill cross-axis?
  27. Issue when centering vertically with flexbox when heights are unknown
  28. Do I not understand the flex-grow property?
  29. How to properly introduce a light/dark mode in Bootstrap?
  30. How do I make card-columns order horizontally?

Leave a Comment