「col-lg-push」と「col-lg-pull」を使用してブートストラップ 3 で列の順序を操作するにはどうすればよいですか?

Twitter Bootstrap 3 でのcol-lg-push とcol-lg-pull を使用した列順序操作

Twitter Bootstrap の便利な Col-lg- Push クラスと Col-lg-pull クラスは、大きな画面 (デスクトップまたは

構文の理解

これらのクラスの構文は次のとおりです。

• col-vp-push-x:列 x 以上のビューポート上の通常の位置から右への列数vp.
• col-vp-pull-x: vp.

ここで、vp は xs、sm、md、または lg であり、x の範囲は 1 ～ 12.

シナリオ例

次の例で、長さ 5 の 2 列と長さ 2 の 1 列の 3 列のグリッドを表示する場合を考えてみましょう。

• デスクトップビュー (≥ lg): ディスプレイ[5] [5] [2] 横。
• Mobile View (≤ sm): [5] (2 番目) [5] (1 番目) [2] を表示します。

コード:

<div class='row'>
  <div class='col-lg-5 col-lg-push-5'></div>
  <div class='col-lg-5 col-lg-pull-5'></div>
  <div class='col-lg-2'></div>
</div>

説明:

最初の列 lg -5 要素は 5 列右に移動されるため、通常の 5 列後から開始されます。
• 2 番目のcol-lg-5 要素は 5 列左にプルされるため、通常の位置の 5 列前から開始されます。
• col-lg-2 要素はそのまま残ります。デフォルトの順序です。

注: 正しく機能することを保証するには、マークアップ内の要素の順序を確認してください。大きな画面で希望の順序と一致します。

以上が「col-lg-push」と「col-lg-pull」を使用してブートストラップ 3 で列の順序を操作するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。