プッシュ クラスとプル クラスを使用してブートストラップ 3 で応答性の高い列の順序を実現するにはどうすればよいですか?

Bootstrap 3 で列を応答的にプッシュ/プルする

Bootstrap 3 では、強力なプッシュ クラスとプル クラスを利用して順序を操作し、異なる画面サイズでの列の位置。一般的なシナリオの 1 つは、視認性と使いやすさを最適化するために、小さな画面で列のレイアウトを再配置することです。

大きな画面では次のレイアウトを検討してください:

<code class="html"><div class="col-lg-3">1</div>
<div class="col-lg-2">2</div>
<div class="col-lg-2">3</div>
<div class="col-lg-2">4</div>
<div class="col-lg-3">5</div></code>

ただし、列を表示したい場合もあります。

<code class="html"><div class="col-xs-6">1</div>
<div class="col-xs-6">5</div>
<div class="col-xs-4">2</div>
<div class="col-xs-4">3</div>
<div class="col-xs-4">4</div></code>

のような小さな画面では、最初は、大画面と小画面の両方のサイズを割り当ててこれを実現しようとするかもしれません。

<code class="html"><div class="col-lg-3 col-xs-6">1</div>
<div class="col-lg-2 col-xs-4 col-xs-push-4">2</div>
<div class="col-lg-2 col-xs-4">3</div>
<div class="col-lg-2 col-xs-4">4</div>
<div class="col-lg-3 col-xs-6 col-xs-pull-12">5</div></code>

ただし、このアプローチでは、予期しないレイアウトや要素の欠落が生じることがよくあります。

これを解決するには、「モバイルファースト」の考え方を採用してください。大きな画面サイズから始めるのではなく、最初に最小の画面のレイアウトを定義します。次に、プッシュ クラスとプル クラスを使用して、大きな画面で列の順序を調整します。

たとえば、次のコードは目的のレイアウトを実現します。

<code class="html"><div class="col-lg-3 col-xs-6">1</div>
<div class="col-lg-3 col-xs-6 col-lg-push-6">5</div>
<div class="col-lg-2 col-xs-4 col-lg-pull-3">2</div>
<div class="col-lg-2 col-xs-4 col-lg-pull-3">3</div>
<div class="col-lg-2 col-xs-4 col-lg-pull-3">4</div></code>

列を目的の順序で配置します。最初に小さな画面で、要素を失うことなく、選択的に押したり引いたりして、大きな画面の正しい位置に配置することができます。このアプローチにより、すべての画面サイズにわたって応答性の高いユーザーフレンドリーなレイアウトが保証されます。

以上がプッシュ クラスとプル クラスを使用してブートストラップ 3 で応答性の高い列の順序を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。