How to Reorder Bootstrap Columns Differently on Mobile vs. Desktop?

Responsive Layout with Column Order Modification in Bootstrap

In web development using Bootstrap, there may arise a need to reorder columns differently on mobile devices compared to larger screens. This question explores a scenario where the column order is desired to switch from 1-3-2 on the desktop version to 1-2-3 on the mobile version.

Bootstrap 4 employs flexbox for layout, which typically results in equal heights for columns. This feature poses a challenge in achieving the desktop layout desired in this case. To circumvent this, one approach is to disable flexbox on larger screens (e.g., LG) and utilize floats to enable natural alignment of columns.

Here's an example code that incorporates this approach:

<div>
<p><strong>How it Works:</strong></p>
<ul>
<li>Columns are maintained in the same row, as the order is relative to the parent row.</li>
<li>d-flex and d-lg-block disable flexbox on LG screens and larger.</li>
<li>float-left aligns columns to the left when flexbox is disabled.</li>
<li>order-* reorders columns when flexbox is enabled on mobile devices.</li>
</ul>
<p>Another option is to explore flexbox wrapping hacks involving w-auto. However, the solution presented above offers a straightforward means of achieving the desired column order in Bootstrap.</p>
</div>

The above is the detailed content of How to Reorder Bootstrap Columns Differently on Mobile vs. Desktop?. For more information, please follow other related articles on the PHP Chinese website!