One tall div next to two shorter divs on Desktop and stacked on Mobile with Bootstrap 4

by

You must disable the flexbox for larger widths because Bootstrap 4’s flexbox makes columns the same height. Then, use floats so that the B & C columns naturally pull to the right, since A is taller. The flexbox order- will work to reorder the cols on mobile…

A-B-C desktop, B-A-C mobile

<div class="container-fluid">
    <div class="row d-flex d-lg-block">
         <div class="col-lg-6 order-1 float-left">
            A
        </div>
        <div class="col-lg-6 order-0 float-left">
            B
        </div>
        <div class="col-lg-6 order-1 float-left">
            C
        </div>
    </div>
</div>

Related: Bootstrap with different order on mobile version

More Related Contents:

  1. Bootstrap row with columns of different height
  2. Bootstrap 4: Multilevel Dropdown Inside Navigation
  3. Animate/Shrink NavBar on scroll using Bootstrap
  4. How to center nav-items in Bootstrap? [duplicate]
  5. Create a responsive navbar sidebar “drawer” in Bootstrap?
  6. Bootstrap 4 Cards of same height in columns
  7. How to make Bootstrap 4 cards the same height in card-columns?
  8. Bootstrap – align button to the bottom of card
  9. Bootstrap 4 – Sticky footer – Dynamic footer height
  10. Bootstrap 4 – Responsive cards in card-columns
  11. Align the form to the center in Bootstrap 4 [duplicate]
  12. Bootstrap navbar link color won’t change
  13. Empty vertical space between columns in Bootstrap 4
  14. Bootstrap navbar: nothing is displayed on smaller devices
  15. Why aren’t my bootstrap 4 columns the same height?
  16. CSS float-right not working in Bootstrap 4 Navbar [duplicate]
  17. How to make Bootstrap cards the same height in card-columns?
  18. My Website is Mirror-flipped on iPhone Devices
  19. How can I override Bootstrap CSS styles?
  20. Bootstrap full-width with 2 different backgrounds (and 2 columns)
  21. 7 equal columns in bootstrap
  22. How to center buttons in Twitter Bootstrap 3?
  23. Bootstrap – Fill fluid container between header and footer
  24. Right align text within Bootstrap 4 breadcrumbs
  25. Bootstrap row and col explanation
  26. How to implement a Navbar Dropdown Hover in Bootstrap v4?
  27. How can I make Bootstrap 4 columns all the same height? [duplicate]
  28. Changing image src depending on screen size
  29. Make Bootstrap’s Carousel both center AND responsive?
  30. Why is my .sticky-top class not working in Bootstrap 4?

Leave a Comment