Les classes Push/Pull peuvent-elles être utilisées pour réorganiser les colonnes .col-*-12 dans Bootstrap ?

Modification de l'ordre des colonnes avec Bootstrap Push/Pull pour les colonnes .col-*-12

Problème :

Vous visez pour réorganiser deux colonnes de taille égale (.col-xs-12) dans Bootstrap sur les appareils mobiles, en inversant leur ordre, en utilisant directives push/pull. Cependant, vous vous demandez si cette approche est viable pour des colonnes de cette taille.

Résolution :

Limites Push/Pull :

Les directives Push et Pull sont conçues pour modifier l'ordre des colonnes pour différentes tailles d'écran, mais elles ont des limites. La réorganisation des colonnes qui occupent toute la grille de 12 colonnes (.col-*-12) n'est pas réalisable avec ces assistants.

Approches alternatives :

1. Réorganiser l'ordre HTML : Vous pouvez réorganiser manuellement l'ordre des colonnes en HTML et appliquer des classes push/pull sur des écrans plus larges pour maintenir la mise en page souhaitée.

2. Astuce de transformation CSS :

   • Implémentez une transformation CSS sur un conteneur de lignes pour inverser efficacement l'ordre des colonnes.
   • Assurez-vous d'un bon alignement horizontal en utilisant des modificateurs de direction en conjonction avec les transformations.
   • Notez que les transformations sont prises en charge dans IE9 avec les préfixes du fournisseur.

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!