Maison >interface Web >tutoriel CSS >Comment réorganiser les colonnes Bootstrap 3 pour une mise en page Mobile-First ?
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 :
<div class="col-lg-9 col-lg-push-3">...</div> <div class="col-lg-3 col-lg-pull-9">...</div>
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!