Comment réorganiser les colonnes Bootstrap différemment sur mobile et sur ordinateur ?

Mise en page réactive avec modification de l'ordre des colonnes dans Bootstrap

Dans le développement Web utilisant Bootstrap, il peut s'avérer nécessaire de réorganiser les colonnes différemment sur les appareils mobiles par rapport aux écrans plus grands. Cette question explore un scénario dans lequel l'ordre des colonnes doit passer de 1-3-2 sur la version de bureau à 1-2-3 sur la version mobile.

Bootstrap 4 utilise flexbox pour la mise en page, ce qui entraîne généralement à hauteurs égales pour les colonnes. Cette fonctionnalité pose un défi pour obtenir la disposition du bureau souhaitée dans ce cas. Pour contourner ce problème, une approche consiste à désactiver flexbox sur les écrans plus grands (par exemple, LG) et à utiliser des flotteurs pour permettre l'alignement naturel des colonnes.

Voici un exemple de code qui intègre cette approche :

<div>

Comment ça marche :

• Les colonnes sont maintenues dans la même ligne, car l'ordre est relatif à la ligne parent.
• d-flex et d-lg-block désactivent flexbox sur les écrans LG et plus.
• float-left aligne les colonnes vers la gauche lorsque flexbox est désactivé.
• order-* réorganise les colonnes lorsque flexbox est activé sur les appareils mobiles.

Une autre option est d'explorer les hacks d'emballage flexbox impliquant w-auto. Cependant, la solution présentée ci-dessus offre un moyen simple d'obtenir l'ordre des colonnes souhaité dans Bootstrap.

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!