How to Arrange One Tall Div Beside 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

Problem:

You want to arrange three divs on a webpage such that they appear side-by-side on desktop screens and stacked on mobile devices. The first div (A) should be taller than the other two (B and C).

Solution:

To achieve this layout using Bootstrap 4, you need to disable the flexbox property on larger screens and use floats to naturally pull the shorter divs (B and C) to the right. Here's how:

1. Create a container and a row with the container-fluid and row classes, respectively.
2. Add a d-flex class to the row for mobile responsiveness.

3. Within the row, create three columns:

   • Div A: Give it the col-lg-6 order-1 float-left classes. This column will be taller than the others.
   • Div B: Give it the col-lg-6 order-0 float-left classes. This column will be pulled to the right.
   • Div C: Give it the col-lg-6 order-1 float-left classes. This column will be placed below Div A and to the right of Div B.

Here's the updated 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>

By disabling the flexbox for larger screens and using floats, you can create a layout where Div A is taller than Divs B and C and where the three divs are stacked on mobile devices.

The above is the detailed content of How to Arrange One Tall Div Beside 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!