Comment les classes « col-lg-push » et « col-lg-pull » de Bootstrap peuvent-elles manipuler l'ordre des colonnes ?

Manipulation de l'ordre des colonnes à l'aide de l'ordre de grille dans Bootstrap

Le système de grille de Bootstrap permet un contrôle précis de la disposition et de l'ordre des colonnes. Les classes col-lg-push et col-lg-pull vous permettent de pousser ou de tirer des colonnes vers des positions spécifiques dans une ligne sur les fenêtres du bureau (>= lg).

Comment utiliser col- lg-push et col-lg-pull

Pour pousser ou tirer une colonne, précisez le numéro souhaité après col-lg-push ou col-lg-pull. Par exemple, col-lg-pull-5 tirerait une colonne de 5 colonnes vers la gauche, en partant de sa position par défaut.

Exemple : Réorganisation des colonnes pour mobile et ordinateur

Prenons l'exemple que vous avez fourni :

[5] [5] [2]  (Desktop)

[5] (second)
[5] (first)
[2]  (Mobile)

Pour réaliser cette disposition en utilisant l'ordre de grille de Bootstrap, vous utiliseriez le code suivant :

<div>

Explication :

Sur les fenêtres d'affichage du bureau (>= lg), l'ordre des colonnes dans votre code HTML déterminera la mise en page. Par conséquent, le contenu B sera poussé vers la droite de 5 colonnes, en le plaçant après le contenu A. Sur les fenêtres mobiles (< lg), l'ordre par défaut s'appliquera, rendant le contenu B en premier, suivi du contenu A.

Remarques importantes :

• Les classes col-lg-push et col-lg-pull affectent les colonnes uniquement sur les grands (bureau).
• L'ordre des colonnes dans votre HTML doit refléter la mise en page mobile souhaitée.
• Bootstrap 4 a introduit le système de grille basé sur flexbox, qui a introduit les classes .order-* pour ordre des colonnes plus flexible.

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!