How to Stack Bootstrap 4 Divs on Mobile and Arrange Them Side-by-Side on Desktop?

Repositioning divs with Bootstrap 4: Stacked on Mobile, Side-by-Side on Desktop

You want to reorder Bootstrap divs on mobile and place them side-by-side on desktop.

Solution:

1. Disable Flexbox for Larger Widths:
   Bootstrap 4's flexbox assigns equal heights to columns. To prevent this, disable flexbox for widths larger than medium.

<div>

2. Use Floats for Smaller Widths (Mobile):
   Enable column floating to allow the second and third columns (B and C) to wrap beneath the first column (A).

        <div>

3. Assign Column Order:
   Use order- utility classes to reorder the columns on mobile. In this case, set the first column's order to 1 (order-1) and the second column's order to 0 (order-0). This will place A below B on mobile, while maintaining their side-by-side arrangement on desktop.

        <div>

This solution achieves the desired layout, with column A remaining full height and columns B and C stacked beneath on mobile.

The above is the detailed content of How to Stack Bootstrap 4 Divs on Mobile and Arrange Them Side-by-Side on Desktop?. For more information, please follow other related articles on the PHP Chinese website!