How to Arrange One Tall Div Next to Two Shorter Divs on Desktop and Stack Them on Mobile Using Bootstrap 4?

One Tall Div Next to Two Shorter Divs on Desktop and Stacked on Mobile with Bootstrap 4

Comprehending the Problem:

Similar to the question referenced, this scenario involves reordering three divs when switching from desktop to mobile. On desktop, these divs should be arranged side-by-side, while on mobile, they should stack vertically. The provided images clearly illustrate the desired layout.

Addressing the Solution:

To achieve this layout, we must disable the default flexbox behavior of Bootstrap 4 for larger widths. By doing so, the columns will no longer have their heights constrained. Instead, we can employ the float property to have the B and C columns naturally align to the right since A is taller.

Implementing the Order:

To reorder the columns on mobile, we utilize the order- utility classes provided by Bootstrap 4:

• Desktop (larger widths): A-B-C
• Mobile: B-A-C

Here's a snippet that implements this approach:

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

This solution effectively reorders the divs as intended, offering the specific layout on both desktop and mobile devices.

The above is the detailed content of How to Arrange One Tall Div Next to Two Shorter Divs on Desktop and Stack Them on Mobile Using Bootstrap 4?. For more information, please follow other related articles on the PHP Chinese website!