How to Reorder Bootstrap 4 Divs: Side-by-Side on Desktop, Stacked on Mobile?

Reordering Divs with Bootstrap 4: Tall Div Adjacent to Shorter Divs on Desktop and Stacked on Mobile

You aim to rearrange three divs on a web page, displaying them side-by-side on desktop devices and stacked on mobile devices.

To achieve this, you need to override Bootstrap 4's flexbox behavior, which causes columns to have the same height. For larger widths, you should disable the flexbox. Then, you can use floats to ensure that the second and third columns (B and C) float naturally to the right, given that the first column (A) is taller.

To complete the reordering on mobile devices, utilize the flexbox order- property. This will ensure that the columns appear in the desired order.

Code Snippet:

<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>

In this example, the order-1 and float-left CSS classes ensure the desired arrangement on desktop devices. On mobile devices, the d-flex class is disabled, allowing the three divs to stack vertically.

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