Bootstrap 3 で応答性の高いプッシュ/プル列動作を実現するにはどうすればよいですか?

Bootstrap 3 での列のプッシュとプル

レスポンシブ レイアウトを設計する場合、小さい画面サイズで列を再配置または変更することが必要になることがよくあります。 Bootstrap 3 は列幅を調整するためのcol-xs-6 などのクラスを提供しますが、特定のブレークポイントで列をプッシュまたはプルするための直接のサポートは提供しません。

応答性の高いプッシュ/プルの実現

小さな画面で望ましいプッシュ/プル動作を実現するには、「モバイル ファースト」という直感に反するアプローチを採用できます。まず、優先するcol-xs-*クラスを使用して小さな画面用のレイアウトを定義し、次にcol-lg-push-*またはcol-lg-pull-*を使用してcol-lg-*クラスを適用して、大きな画面に列を配置します。

たとえば、質問に記載されているレイアウトを模倣するには:

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

このようにすると、列は小さな画面で指定された順序で表示され、大きなデスクトップでは列の位置をcol経由で調整します。 -lg-* クラス。基本的に、このアプローチには、デスクトップのレイアウトから開始してモバイル用に調整するという通常のプロセスを逆にすることが含まれます。

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