How to Achieve Custom Column Ordering in Responsive Bootstrap on Mobile?

Responsive Bootstrap Column Ordering on Mobile

In designing responsive layouts, ensuring the desired column order on different screen sizes can be challenging. This question addresses the specific case of arranging a nested column layout differently on mobile devices compared to larger screens.

The Problem:

A developer has a layout with two columns and a nested row within the right-hand column. The goal is to display the columns in the following order on mobile:

|  1   |
|      |
--------
|  2   |
|      |
|      |
|      |
|      |
|      |
--------
|  3   |
|      |
--------

However, the current code results in the incorrect order of 1-3-2 on mobile.

Solution:

The solution involves disabling flexbox for larger screen sizes and using floats to achieve the desired layout on mobile. The following code demonstrates this approach:

<div>

How It Works:

• Disabling Flexbox on Larger Screens: The d-flex d-lg-block utility classes enable flexbox on screens smaller than lg but disable it on lg and up.
• Using Floats for Mobile: When flexbox is disabled, the float-left utility is used on the columns to position them side by side.
• Reordering with order-*: On mobile (when flexbox is enabled), the order-* utility classes are used to reorder the columns as desired.

Alternative Solution:

As mentioned in the answer provided, another potential solution involves a flexbox wrapping hack using w-auto. This approach involves setting an auto width on the columns, allowing them to wrap to the next line on mobile. However, it's important to note that this hack may not be as reliable as the first solution, which relies on standard Bootstrap utilities.

The above is the detailed content of How to Achieve Custom Column Ordering in Responsive Bootstrap on Mobile?. For more information, please follow other related articles on the PHP Chinese website!