Les classes Push/Pull peuvent-elles être utilisées pour les colonnes Bootstrap de largeur égale ?

Réorganisation des colonnes Bootstrap avec Push/Pull pour des éléments de même largeur

Lorsque vous travaillez avec le système de grille de Bootstrap, il est crucial d'ajuster l'ordre des colonnes pour des mises en page réactives. Cependant, il peut être difficile de réorganiser des colonnes de taille égale à l'aide des directives push/pull.

Push/Pull peut-il être utilisé pour les éléments .col-*-12 ?

Non, il n'est pas possible de changer l'ordre des colonnes avec des classes comme ".col-xs-12.col-xs-push-12" et ".col-xs-12.col-xs-pull-12" car la largeur combinée dépasse la définition de la grille à 12 colonnes de Bootstrap.

Solutions alternatives :

1. Réorganisation en HTML et utilisation de classes de tri pour des écrans plus grands

Réorganisez l'ordre des colonnes dans le HTML et appliquez des classes push/pull pour obtenir l'ordre souhaité sur des écrans plus grands :

<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. Transformation CSS pour la réorganisation verticale des colonnes

Utilisez les transformations CSS pour inverser l'ordre des colonnes affichées verticalement les unes en dessous des autres :

<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 pris 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!