Les classes Push/Pull de Bootstrap peuvent-elles réorganiser les colonnes de taille égale sur les appareils mobiles ?

Réorganisation des colonnes Bootstrap avec Push/Pull : limitations et approches alternatives

Lorsque vous traitez des colonnes de taille égale (.col-*-12), une requête courante se pose concernant la faisabilité de modifier leur ordre à l'aide des directives push et pull de Bootstrap. Le but de cette requête est de comprendre s'il est possible d'inverser le placement de deux de ces colonnes sur les appareils dotés de tailles d'écran mobiles.

Limitations du Push/Pull

Malheureusement, il n'est pas possible de réorganiser .col-*-12 colonnes utilisant des classes push et pull. Cela est dû au fait que la somme de ces colonnes dépasse la taille de grille prédéfinie de 12 colonnes, comme spécifié par la variable @grid-columns dans Bootstrap.

Approches alternatives

Pour atteindre l'objectif réorganisation souhaitée, envisagez les alternatives suivantes :

1. Modification de la structure HTML et utilisation du push/pull pour les écrans plus grands :

Réorganisez les colonnes dans le code HTML et appliquez des classes push/pull pour obtenir l'ordre souhaité sur des écrans plus grands. 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>

2. Utilisation des transformations CSS pour inverser l'ordre des colonnes sur mobile :

Appliquez le CSS suivant pour inverser l'ordre des colonnes empilées verticalement sur les appareils dotés d'une taille d'écran de 767 px ou moins :

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

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

Notez que cette approche nécessite l'utilisation d'une classe HTML spécifique aux colonnes souhaitées à réorganiser.

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!