Comment Bootstrap 4 gère-t-il l'ordre des colonnes sur différentes tailles d'écran ?

Ordre des colonnes dans Bootstrap4

Pour une disposition flexible des colonnes sur différentes tailles d'écran, Bootstrap propose une gamme d'options.

Ordre réactif dans Bootstrap 4.0 :

Bootstrap 4 élimine l'utilisation de Préfixes "xs-" pour ses classes de tri réactives. Au lieu de cela, les modificateurs "push-" et "pull-" spécifient la fenêtre d'affichage et le nombre d'unités pour décaler la colonne. Par exemple, pour obtenir la commande 1-3-2 souhaitée sur mobile :

<div>

Commande réactive dans Bootstrap 4.1 et versions ultérieures :

Bootstrap 4.1 introduit flexbox, simplifiant l'ordre des colonnes. Les classes de commande vont de « commande-1 » à « commande-12 ». Les colonnes peuvent être commandées de manière réactive, par exemple "order-md-12 order-2" (dernière sur MD, 2e sur XS) :

<div>

Méthodes de commande alternatives :

En plus des classes de commande réactives, les utilitaires de direction flexbox offrent un autre approche :

<div>

Notes supplémentaires:

• L'ordre des colonnes est relatif à son .row parent.
• Les classes réactives permettent un contrôle granulaire sur commande, permettant des arrangements complexes sur plusieurs tailles d'écran.
• Bootstrap 4.1 et supérieur n'est plus prend en charge les classes push/pull utilisées dans les versions antérieures à 4.0.

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!