Pouvez-vous réorganiser les colonnes Bootstrap avec .col-*-12 en utilisant Push et Pull ?

Réorganiser les colonnes Bootstrap avec .col-*-12 à l'aide de Push et Pull

Dans le domaine des dispositions de grille Bootstrap, vous pourriez rencontrer des instances où vous devez modifier l'ordre des colonnes avec la classe .col-xs-12 sur des écrans plus petits (appareils mobiles). Il est important de comprendre que les directives push et pull traditionnelles peuvent ne pas offrir de solution directe dans ce scénario.

Pouvez-vous réorganiser les colonnes avec .col-*-12 en utilisant Push/Pull ?

Non, vous ne pouvez pas réorganiser les colonnes .col--12 en utilisant les classes .col--push-12 et .col-*-pull-12. En effet, la largeur combinée de ces colonnes dépasse la grille de 12 colonnes définie.

Approches alternatives pour réorganiser les colonnes .col-*-12 :

• Réorganiser les colonnes en HTML : Vous pouvez modifier l'ordre des colonnes dans votre balisage HTML et utiliser les classes de tri sur des tailles d'écran plus grandes. Par exemple :

<code class="html"><div class="row">
  <div class="col-xs-12 col-sm-6 col-sm-push-6">
    <p>test2</p>
  </div>

  <div class="col-xs-12 col-sm-6 col-sm-pull-6">
    <p>test1</p>
  </div>
</div></code>

• Ordre vertical inverse des colonnes avec des transformations CSS : Cette méthode implique l'utilisation de transformations CSS pour faire pivoter l'ordre des colonnes sur des écrans plus petits.

<code class="css">@media (max-width: 767px) {
  .row.reorder-xs {
    transform: rotate(180deg);
    direction: rtl;
  }

  .row.reorder-xs > [class*="col-"] {
    transform: rotate(-180deg);
    direction: ltr;
  }
}</code>

Remarque : Les transformations CSS sont prises en charge dans IE9 et versions ultérieures, mais n'oubliez pas d'inclure les préfixes du fournisseur pour la compatibilité entre navigateurs.

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!