ブートストラップ3：プッシュ/プル - 最初にバグやモバイル？

Question

私はの注文を私のcol-*に変更したいと思います。

私はちょうど2つのChars （C & D）の順序を修正しましたが、それは正しいと感じません。 の「モバイルファースト」のためか何か不足していますか？

目標：

------------------------- 
| SIZE | ORDER | 
------------------------- 
| >= SM | A B C D | 
| < SM | A B D C | <- C & D are switching 
------------------------- 

（動作しない）私の最初のアプローチと理解：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-6">A</div> 
 
    <div class="col-sm-6">B</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-sm-6 col-sm-push-6">C</div> <!-- !!! --> 
 
    <div class="col-sm-6 col-sm-pull-6">D</div> 
 
    </div> 
 
</div>

第二のアプローチ（作業していて、わからない正しい場合） ：事前に

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-6">A</div> 
 
    <div class="col-sm-6">B</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-sm-6 col-sm-push-6">D</div> <!-- !!! --> 
 
    <div class="col-sm-6 col-sm-pull-6">C</div> 
 
    </div> 
 
</div>

ありがとう！

Answer 1

あなたがpush class and pull classを使用している場合、2番目の方法は正しいです。テキストはそれぞれ別の場所に移動します。 sm-push & sm-pullを使用しているため、小型デバイスでのみ有効です。モバイルビューにしたい場合は、xs-pull and xs-pushを使用できます。