[解決済み] Twitter Bootstrap 3 の col-lg-push と col-lg-pull を使った列の並び操作

質問

現在、Twitter Bootstrap 3のドキュメントを読んでいますが、以下のようなカラムオーダーに挑戦してみました。 このページ が、壁にぶつかった。なぜこのようなコードが機能するのか、どのように設定を正しく指定すればいいのか、理解できません。表示したいのは、長さ5のグリッドと、長さ5のグリッド、そして最後に長さ2のグリッドを1つずつ表示することです。

だから私のはこんな感じです。

[5] [5] [2]

そして、実現したいことは、Desktopで見たときは上記のレイアウトで表示されるが、モバイルで見たときは、まず2番目の長さ5のオブジェクト、次に1番目の長さ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ファイルをチェックしてみてください。

とにかく、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 は5カラムだけ sm ビューポート以上であること。これは、Bootstrapがモバイルファーストのフレームワークであるため、HTMLにモバイル版のサイトを反映させる必要があるためです。PushingとPullは、より大きな画面で行われます。

• (デスクトップ）より大きなビューポートがプッシュされ、プルされる。
• (モバイル）小さい方のビューポートは通常の順序でレンダリングされます。

デモ

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

ビューポート

|B|
|A|
|C|

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

v4 では、フレックスボックスとその他のグリッドシステムの変更が行われ、pushpull クラスは削除され、フレックスボックスの順序を使用するようになりました。

• 使用方法 .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>