Bootstrap4を介して列を注文する

デスクトップとモバイルでさまざまな方法で注文したい3つの列があります。現在、私のグリッドは次のようになっています。

<div class="row">
  <div class="col-xs-3 col-md-6">
    1
  </div>
  <div class="col-xs-3 col-md-6">
    2
  </div>
  <div class="col-xs-6 col-md-12">
    3
  </div>
</div>

モバイルビューで、次の出力が必要です。

1-3-2

残念ながら、Bootstrap4の.col-md-push-*and.col-md-pull-*クラスでこれを解決する方法がわかりません。

2018-最新のBootstrap4でこの質問を再検討します。

応答発注クラスは今あるorder-first、order-lastとorder-0-order-12

Bootstrap 4プッシュ プルクラスは現在push-{viewport}-{units}、pull-{viewport}-{units}およびxs-中置辞が削除されています。mobile / xsで目的の1-3-2レイアウトを取得するには、次のようにします。Bootstrap4プッシュプルデモ（これは4.0ベータ版より前でのみ機能します）

ブートストラップ4.1以降

Bootstrap 4はフレックスボックスであるため、列の順序を簡単に変更できます。colsは、親を基準にして（last on 、2nd on ）のようorder-1にorder-12、からに順序付けできます。order-md-12 order-2mdxs.row

<div class="container">
    <div class="row">
        <div class="col-3 col-md-6">
            <div class="card card-body">1</div>
        </div>
        <div class="col-6 col-md-12 order-2 order-md-12">
            <div class="card card-body">3</div>
        </div>
        <div class="col-3 col-md-6 order-3">
            <div class="card card-body">2</div>
        </div>
    </div>
</div>

デモ：クラスを使用して順序を変更するorder-*

デスクトップ（大画面）：

モバイル（小さい画面）：

フレックスボックスの方向ユーティリティを使用して列の順序を変更することも可能です...

<div class="container">
    <div class="row flex-column-reverse flex-md-row">
        <div class="col-md-8">
            2
        </div>
        <div class="col-md-4">
            1st on mobile
        </div>
    </div>
</div>

デモ：ブートストラップ4.1Flexboxの方向性による注文変更

古いバージョンのデモデモ
-アルファ6
デモ-ベータ（3）

Bootstrap4.1以降の注文デモをもっと見る

ACB ABC

これは、CSSの「Order」プロパティとメディアクエリを使用して実現することもできます。

このようなもの：

@media only screen and (max-width: 768px) {
    #first {
        order: 2;
    }
    #second {
        order: 4;
    }
    #third {
        order: 1;
    }
    #fourth {
        order: 3;
    }
}

CodePenリンク：https：//codepen.io/preston206/pen/EwrXqm

これでも機能します：

<div class="container">
            <div class="row">
                <div class="col-4 col-sm-4 col-md-6 order-1">
                    1
                </div>
                <div class="col-4 col-sm-4  col-md-6 order-3">
                    2
                </div>
                <div class="col-4 col-sm-4  col-md-12 order-2">
                    3
                </div>
            </div>
          </div>

私はBootstrap3を使用しているので、Bootstrap 4を実行する簡単な方法があるかどうかはわかりませんが、このcssは機能するはずです。

.pull-right-xs {
    float: right;
}

@media (min-width: 768px) {
   .pull-right-xs {
      float: left;
   }
}

...そして2番目の列にクラスを追加します：

<div class="row">
    <div class="col-xs-3 col-md-6">
        1
    </div>
    <div class="col-xs-3 col-md-6 pull-right-xs">
        2
    </div>
    <div class="col-xs-6 col-md-12">
        3
    </div>
</div>

編集：

ああ...私が上に書いたものは正確にあるように見えます。Bootstrap 4のpull-xs-rightクラス：X 2番目の列に追加するだけで、完全に機能するはずです。

上記の再検討された回答で提供されたコードで説明されているように、列の順序付けはBootstrap 4ベータでは機能しないため、以下を使用する必要があります（codeply 4Flexbox注文デモで示されているように-で提供されたアルファ/ベータリンク答え）。

<div class="container">
<div class="row">
    <div class="col-3 col-md-6">
        <div class="card card-block">1</div>
    </div>
    <div class="col-6 col-md-12  flex-md-last">
        <div class="card card-block">3</div>
    </div>
    <div class="col-3 col-md-6 ">
        <div class="card card-block">2</div>
    </div>
</div>

ただし、「Flexbox注文デモ-ベータ」はアルファコードベースに移行し、コードベースをベータに変更（および実行）すると、divが単一の列に誤って表示されることに注意してください-しかし、カットしてからのコードプライの問題のように見えますcodeplyからコードを貼り付けると、説明どおりに機能します。

2つの異なるコンテナを実行できます。1つはモバイル注文でデスクトップ画面に非表示にし、もう1つはデスクトップ注文でモバイル画面に非表示にします。