Comment réorganiser les colonnes .col-*-12 dans Bootstrap à l'aide de Push/Pull ?

Réorganisation des colonnes avec Push/Pull pour .col-*-12 dans Bootstrap

Dans Bootstrap, les classes de directives push et pull peuvent être utilisé pour ajuster le placement des colonnes par rapport aux colonnes environnantes. Cependant, lorsqu'il s'agit de colonnes d'une largeur de 12 (c'est-à-dire .col-*-12), il est important de noter que le push/pull ne peut pas modifier directement leur ordre.

En effet, la somme des largeurs des deux colonnes dépasse la largeur de grille par défaut de 12 colonnes spécifiée par Bootstrap. Au lieu de cela, il existe deux approches pour réorganiser ces colonnes :

1. Inverser l'ordre des colonnes HTML et appliquer des classes d'ordre sur des écrans plus grands

Dans cette approche, vous pouvez échanger l'ordre des colonnes dans votre balisage HTML, puis utiliser push/pull pour modifier leur ordre 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. Utiliser les transformations CSS pour la réorganisation verticale

Vous pouvez également utiliser des transformations CSS pour inverser l'ordre des colonnes lorsqu'elles sont empilées verticalement sur des écrans plus petits :

<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 CSS les transformations sont prises en charge dans IE9 et versions ultérieures, vous devrez donc peut-être inclure les préfixes du fournisseur pour des raisons de compatibilité.

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!