ブートストラップのプッシュ/プル クラスは、モバイル デバイス上の同じサイズの列を並べ替えることができますか?

プッシュ/プルによるブートストラップ列の並べ替え: 制限事項と代替アプローチ

同じサイズの列 (.col-*-12) を扱う場合、一般的なクエリが発生します。 Bootstrap のプッシュおよびプル ディレクティブを使用して順序を変更する実現可能性について。このクエリの目的は、モバイル画面サイズのデバイス上でこのような 2 つの列の配置を逆にできるかどうかを理解することです。

プッシュ/プルの制限

残念ながら、並べ替えることはできません。プッシュ クラスとプル クラスを使用する .col-*-12 列。これは、ブートストラップの @grid-columns 変数で指定されているように、これらの列の合計が事前定義されたグリッド サイズの 12 列を超えているためです。

代替アプローチ

希望する並べ替えを行う場合は、次の代替案を検討してください。

1.大きな画面での HTML 構造の変更とプッシュ/プルの使用:

HTML 内の列を再配置し、プッシュ/プル クラスを適用して、大きな画面で希望の順序を実現します。例:

<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. CSS 変換を使用してモバイルで列の順序を逆にする:

画面サイズが 767 ピクセル以下のデバイスで垂直に積み上げられた列の順序を逆にするには、次の CSS を適用します:

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

この方法では、並べ替えたい列に固有の HTML クラスを使用する必要があることに注意してください。

以上がブートストラップのプッシュ/プル クラスは、モバイル デバイス上の同じサイズの列を並べ替えることができますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。