Comment puis-je réorganiser les colonnes Bootstrap 3 pour les mises en page mobiles ?

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

Bootstrap fournit un système de grille puissant pour créer des mises en page réactives. Cependant, il lui manque la possibilité de modifier explicitement l’ordre des colonnes pour les mises en page mobiles. Cet article explore des approches alternatives pour réorganiser les colonnes.

Problème :

Un utilisateur crée une mise en page réactive avec une barre de navigation supérieure et deux colonnes : une barre latérale et du contenu. Lorsque l'écran est redimensionné pour une mise en page mobile, la barre latérale s'empile au-dessus du contenu au lieu d'être affichée directement en dessous. Le but est de réorganiser l'ordre des colonnes sur mobile pour avoir le contenu principal en haut.

Solution :

Bien qu'il ne soit pas possible de modifier directement la colonne commande pour les écrans mobiles, il existe une solution de contournement en utilisant les classes push et pull.

Code Explication :

Pour prioriser le contenu principal, changez l'ordre des colonnes comme suit :

<!-- Main Content (Pushed 3 columns to the right on large screens) -->
<div class="col-lg-9 col-lg-push-3">...</div>

<!-- Sidebar (Pulled 9 columns to the left on large screens) -->
<div class="col-lg-3 col-lg-pull-9">...</div>

Cette modification déplace le contenu principal vers la droite de 3 colonnes et de la barre latérale à gauche par 9 colonnes sur grands écrans. Cependant, sur les écrans plus petits, l'ordre des colonnes par défaut reste inchangé, ce qui conduit à la disposition souhaitée du contenu principal en haut.

Considérations supplémentaires pour la barre latérale :

Si vous préférez afficher la barre latérale à l'intérieur de la barre de navigation en expansion, considérez ce qui suit :

• Développez le menu pour empiler le contenu verticalement au lieu de horizontalement.
• Masquer la barre latérale par défaut et l'afficher en utilisant JavaScript lors de l'activation du menu.

Conclusion :

Utiliser le push and pull classes, vous pouvez réorganiser efficacement les colonnes pour les grands écrans. Pour des dispositions de colonnes plus complexes ou des réorganisations mobiles, explorez des solutions alternatives, telles que des grilles réactives ou CSS Flexbox.

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!