ブートストラップでcol-12の順序を並べ替える方法は？

Question

私は、次の列があります

だから、

<div class="col-xs-12 col-sm-6">A</div> 
<div class="col-xs-12 col-sm-6">B</div> 

は、 "SM" に彼らが行く：

[A][B] 

と "XS" に彼らが行く：

[A] 
[B] 

私が欲しい、上を"xs"を使用して注文をスワップします。

[B] 
[A] 

しかし、.pullと.pushを追加することはできません（彼らは単に、画面の外に出る）：

<div class="col-xs-12 col-xs-push-12 col-sm-6">A</div> 
<div class="col-xs-12 col-xs-pull-12 col-sm-6">B</div> 

Answer 1

この方法[B]もpull-leftまたはpull-right

<div class="col-xs-12 col-sm-6 pull-right">B</div> 
<div class="col-xs-12 col-sm-6 pull-left">A</div> 

フローティングクラスを使用することができます右に来ると、[A]がプルクラスのためにこのように大きな画面で左に来るでしょう

[A][B] 

とsma彼らは100％に来るとき、LLの画面は、彼らはあなたがモバイルまず、その後、デスクトップ用に設計する必要があり、この

[B] 
[A] 

Answer 2

のように来ます。だから、最初のアレンジ小さなスクリーンで、次いで溶液1

<div class="col-xs-12 col-xs-6 col-xs-push-6">B</div> 
<div class="col-xs-12 col-xs-6 col-xs-pull-6">A</div> 

Answer 3

を引っ張ったり、大きなデバイスのためにプッシュする必要があります。http://v4-alpha.getbootstrap.com/components/utilities/

<div class="pull-xs-left">Float left on all viewport sizes</div> 
<div class="pull-xs-right">Float right on all viewport sizes</div> 
<div class="pull-xs-none">Don't float on all viewport sizes</div> 

<div class="pull-sm-left">Float left on viewports sized SM (small) or wider</div> 
<div class="pull-md-left">Float left on viewports sized MD (medium) or wider</div> 
<div class="pull-lg-left">Float left on viewports sized LG (large) or wider</div> 
<div class="pull-xl-left">Float left on viewports sized XL (extra-large) or wider</div> 

から

使用V-4ブートストラップする方法をxsやsmにdiv floatを作ることができます。

解決方法2：

これまでの標準的なブートストラップ・アプローチは、列の順序クラスを使用し、「モバイル第一」を考えることですメディアクエリー

@media(max-width:767px) 
{ 
.a 
    { 
    float:right; 
    } 
} 

Answer 4

を使用してCSSの修正を行います。最初にモバイルレイアウトを作成し、push,pullクラスを使用してsm画面に調整します。

<div class="row"> 
    <div class="col-sm-push-6 col-sm-6">B</div> 
    <div class="col-sm-pull-6 col-sm-6">A</div> 
</div> 

http://www.bootply.com/UST50mXjZW

これはデフォルトの動作であるので、またcol-xs-12クラスは必要ありません。