Comment obtenir un classement personnalisé des colonnes dans Responsive Bootstrap sur mobile ?

Commande de colonnes Bootstrap réactives sur mobile

Lors de la conception de mises en page réactives, garantir l'ordre des colonnes souhaité sur différentes tailles d'écran peut être un défi. Cette question aborde le cas spécifique de la disposition différente d'une disposition de colonnes imbriquées sur les appareils mobiles par rapport aux écrans plus grands.

Le problème :

Un développeur a une disposition avec deux colonnes et une ligne imbriquée dans la colonne de droite. L'objectif est d'afficher les colonnes dans l'ordre suivant sur mobile :

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

Cependant, le code actuel entraîne un ordre incorrect de 1-3-2 sur mobile.

Solution :

La solution consiste à désactiver flexbox pour les tailles d'écran plus grandes et à utiliser des flotteurs pour obtenir la disposition souhaitée sur mobile. Le code suivant illustre cette approche :

<div>

Comment ça marche :

• Désactivation de Flexbox sur des écrans plus grands : Le d- Les classes utilitaires flex d-lg-block activent flexbox sur les écrans plus petits que LG mais le désactivent sur LG et plus.
• Utilisation de Floats pour mobile : Lorsque flexbox est désactivé, l'utilitaire float-left est utilisé sur les colonnes pour les positionner côte à côte.
• Réorganisation avec order-* : Sur mobile (lorsque flexbox est activé), les classes utilitaires order-* sont utilisées pour réorganiser les colonnes. colonnes comme vous le souhaitez.

Solution alternative :

Comme mentionné dans la réponse fournie, une autre solution potentielle implique un hack d'emballage flexbox utilisant w-auto. Cette approche consiste à définir une largeur automatique sur les colonnes, leur permettant de passer à la ligne suivante sur mobile. Cependant, il est important de noter que ce hack n'est peut-être pas aussi fiable que la première solution, qui repose sur les utilitaires Bootstrap standard.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!