私は現在、Twitter Bootstrap 3のドキュメントを読んでおり、このページに示すように列の順序を追おうとしまし たが、壁にぶち当たりました。このようなコードが機能する理由や、設定を正しく指定する方法がわかりません。私が表示したいのは、長さ5ともう1つの長さ5で構成される1つのグリッド、そして最後に1つの長さ2のグリッドです。

だから私のものは次のようなものです：

[5] [5] [2]

そして私が達成したいのは、デスクトップで表示したときに上記のレイアウトが表示されることですが、モバイルで表示したときは、最初に2番目の長さ5オブジェクト、次に最初の長さ5オブジェクト、最後に長さ2オブジェクトを表示します、垂直。このような：

[5] (second)
[5] (first)
[2]  

上記のドキュメントで説明されている手順を実行しようとしましたが、モバイルプラットフォーム上にあるにもかかわらず、最初の長さ5のオブジェクトが2番目のものよりも上にありました。言い換えれば、私はこれを得た：

[5] (first)
[5] (second)
[2] 

では、2つ目を1つ目の上に正しく配置するにはどうすればよいですか？または、同じ長さのオブジェクトを使用しているため、列の順序付けが機能しないのでしょうか？

これがあなたの情報のための私のコードです：

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

また、ドキュメンテーションは何を意味するのpullかをpush意味しません。だから私は何かが足りないのですか？

ありがとう。

この回答は3つの部分に分かれています。下記の公式リリース（v3およびv4）を参照してください。

ダウンロードしたRC1の元のファイルでcol-lg-push-xまたはpullクラスを見つけることもできなかったので、bootstrap.cssファイルを確認してください。うまくいけば、これは彼らがRC2で整理するものです。

とにかく、col-push- *クラスとpullクラスは存在していたので、これはあなたのニーズに合うでしょう。ここにデモがあります

<div class="row">
    <div class="col-sm-5 col-push-5">
        Content B
    </div>
    <div class="col-sm-5 col-pull-5">
        Content A
    </div>
    <div class="col-sm-2">
        Content C
    </div>
</div>

編集：以下は公式リリースv3.0の回答です

この件についてのブログ投稿も参照してください

• col-vp-push-x=右に列をプッシュするのx > -カラムは、通常レンダリングする場所から出発して、列の数position: relativeに、VP以上ビューポート。

• col-vp-pull-x=左に列を引くのx > -カラムは、通常レンダリングする場所から始まる列の数position: relativeに、VP以上ビューポート。

  vp = xs、sm、md、またはlg

  x = 1から12

ほとんどの人を混乱させるのは、HTMLマークアップの列の順序を変更する必要があることだと思います（以下の例では、BはAの前にあります）。指定されたもの以上。つまりcol-sm-push-5、smビューポート以上で5列のみプッシュします。これは、Bootstrapが「モバイルファースト」のフレームワークであるため、HTMLにサイトのモバイルバージョンを反映させる必要があるためです。次に、大きな画面でプッシュとプルが行われます。

• （デスクトップ）大きなビューポートは押したり引いたりします。
• （モバイル）小さいビューポートは通常の順序でレンダリングされます。

デモ

<div class="row">
    <div class="col-sm-5 col-sm-push-5">
        Content B
    </div>
    <div class="col-sm-5 col-sm-pull-5">
        Content A
    </div>
    <div class="col-sm-2">
        Content C
    </div>
</div>

ビューポート> = sm

|A|B|C|

ビューポート<sm

|B|
|A|
|C|

編集：以下はv4.0の答えです

v4には、フレックスボックスが付属し、グリッドシステムへのその他の変更が加えられています。また、フレックスボックスの順序付けを使用するため、push \ pullクラスが削除されています。

• .order-*クラスを使用して視覚的な順序を制御する（ここで* = 1から12）
• これはグリッド層固有にすることもできます .order-md-*
• また、.order-first（-1）及び.order-last（13）有り

<div class="row">
  <div class="col order-2">1st yet 2nd</div>
  <div class="col order-1">2nd yet 1st</div>
</div>

ブラウザの左側にdivを「プル」し、ブラウザの左側からdivを「プッシュ」します。

お気に入り：

したがって、基本的に、Webページの3列のレイアウトでは、「本体」が「中央」に表示され、「モバイル」ビューでは、「本体」がページの「上部」に表示されます。これは主に、3列のレイアウトを持つすべての人が望んでいます。

<div class="container">
    <div class="row">
        <div id="content" class="col-lg-4 col-lg-push-4 col-sm-12">
        <h2>This is Content</h2>
        <p>orem Ipsum ...</p>
        </div>

        <div id="sidebar-left" class="col-lg-4  col-sm-6 col-lg-pull-4">
        <h2>This is Left Sidebar</h2>
        <p>orem Ipsum...</p>
        </div>


        <div id="sidebar-right" class="col-lg-4 col-sm-6">
        <h2>This is Right Sidebar</h2>
        <p>orem Ipsum.... </p>
        </div>
    </div>
</div>

あなたはそれをここで見ることができます：http : //jsfiddle.net/DrGeneral/BxaNN/1/

それが役に立てば幸い

誤解 列の順序付けに関する一般的な誤解は、モバイルデバイスでプッシュとプルを実行する必要がある（または実行できる）ことと、デスクトップビューがマークアップの自然な順序でレンダリングされることです。これは間違っています。

Reality Bootstrapはモバイルファーストのフレームワークです。つまり、HTMLマークアップの列の順序は、モバイルデバイスに表示する順序を表す必要があります。つまり、プッシュとプルは大きなデスクトップビューで行われます。モバイルデバイスでは表示されません。

Brandon Schmalz-フルスタックWeb開発者 詳細な説明はこちら

私はこれらの2つの良い答えに$ 0.2を追加するように感じました。3列の状況で最後の列を一番上まで移動しなければならない場合がありました。

[A] [B] [C]

に

[C]

[A]

[B]

Boostrapのクラス.col-xx-push-Xは他に何もせず、列を右left: XX%; にプッシュします。そのため、列を右にプッシュするために必要なのは、左に行く疑似列の数を追加することだけです。

この場合：

• 2つの列（col-md-5およびcol-md-3）は左に移動し、それぞれに右の列の値が表示されます。

• one（col-md-4）は、最初の2つの左の合計（5 + 3 = 8）によって右に移動します。

<div class="row">
    <div class="col-md-4 col-md-push-8 ">
        C
    </div>
    <div class="col-md-5 col-md-pull-4">
        A
    </div>
    <div class="col-md-3 col-md-pull-4">
        B
    </div>
</div>

ビューポートのサイズに応じて1/2/4の列でデータを整理する必要がある場合、プッシュとプルはまったくオプションにならない場合があります。そもそも商品をどのように注文しても、いずれかのサイズで間違った注文になる場合があります。

この場合の解決策は、プッシュクラスまたはプルクラスなしでネストされた行と列を使用することです。

例

XSではあなたが欲しい...

A
B
C
D
E
F
G
H

SMではあなたが欲しい...

A   E
B   F
C   G
D   H

MD以上ではあなたが欲しい...

A   C   E   G
B   D   F   H

解決

ネストされた2列の子要素を、周囲の2列の親要素で使用します。

これが実際のスニペットです：

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript" ></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="row">
  <div class="col-sm-6">
    <div class="row">
      <div class="col-md-6"><p>A</p><p>B</p></div>
      <div class="col-md-6"><p>C</p><p>D</p></div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="row">
      <div class="col-md-6"><p>E</p><p>F</p></div>
      <div class="col-md-6"><p>G</p><p>H</p></div>
    </div>
  </div>
</div>

このソリューションのもう1つの利点は、アイテムがコードに自然な順序（A、B、C、... H）で表示され、シャッフルする必要がないことです。これは、CMS生成に適しています。