Home >Web Front-end >CSS Tutorial >How to Arrange One Tall Div Beside Two Shorter Divs on Desktop and Stack Them on Mobile Using 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:
Within the row, create three columns:
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!