How to Achieve a Tall Div Next to Two Shorter Divs on Desktop and Stacked on Mobile?

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

Problem:

Achieving a layout where three divs are stacked on mobile devices but appear side-by-side on larger screens (desktop).

Solution:

The solution involves disabling flexbox behavior on wider screens and using floats to allow the shorter divs (B and C) to naturally align to the right. On mobile, the flexbox order property is used to reorder the divs as follows:

• Desktop: A-B-C
• Mobile: B-A-C

Code:

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

The above is the detailed content of How to Achieve a Tall Div Next to Two Shorter Divs on Desktop and Stacked on Mobile?. For more information, please follow other related articles on the PHP Chinese website!