Comment réorganiser les colonnes Bootstrap 3 pour une mise en page Mobile-First ?

Réorganisation des colonnes Bootstrap 3 dans la mise en page mobile

Problème :

Une mise en page réactive comporte une barre de navigation supérieure fixe et deux colonnes en dessous : une barre latérale et un contenu principal. Alors que la mise en page fonctionne comme prévu sur un ordinateur de bureau, sur les appareils mobiles, la barre latérale s'empile au-dessus du contenu principal, le plaçant dans une position indésirable. L'ordre souhaité sur mobile est d'afficher en premier le contenu principal, suivi de la barre latérale.

Réponse :

La modification directe de l'ordre des colonnes sur mobile n'est pas réalisable dans Bootstrap 3. Cependant, une solution de contournement consiste à utiliser la fonctionnalité de réorganisation des colonnes réactives de Bootstrap pour les grandes écrans.

Étapes :

1. Réorganisez l'ordre des colonnes dans le HTML, en plaçant le contenu principal en premier :

<div class="col-lg-9 col-lg-push-3">...</div>
<div class="col-lg-3 col-lg-pull-9">...</div>

2. Par défaut, ces classes affichent le contenu principal en premier, même sur les appareils mobiles.
3. La classe col-lg-push-3 pousse le contenu principal de trois colonnes vers la droite, tandis que col-lg-pull-9 tire la barre latérale de neuf colonnes vers la gauche, ce qui donne l'ordre souhaité sur les grands écrans.

Explication :

Dans Bootstrap, les colonnes peuvent être repositionnées à l'aide de col-push et col-pull pour un écran spécifique tailles. En utilisant col-lg-push et col-lg-pull pour les grands écrans, les colonnes adopteront l'ordre spécifié sur ces écrans tout en conservant l'ordre d'origine sur les appareils plus petits.

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!