プッシュ/プルブートストラップで列の順序を変更

Question

ブートストラップで「プッシュ」および「プル」クラスが検出されましたが、私が好きなように実装するのに苦労しています。 XSの画面では、次のように私の内容が正しいとする、表示されます。

|A||B||C| 

しかし、SMの画面上で、私はそれをする必要があります

|B| 
|C| 
|A| 

私のHTMLは以下の通りです。私は、私のボタンが含まれているdivに "col-sm-push-10"を追加しようとしましたが、それはそれを自分のdiv内の右側にプッシュしました。私は実際にこの部門を動かす必要があります。どんな助けでも大歓迎です!!

<div class="container-fluid"> 
    <div class="col-sm-4"> 
     <ul class="prod-group"> 
     <div class="col-xs-2 col-sm-10"> 
      <li><button type="button" class="btn">A</button></li> 
      </div> 
      <div class="col-xs-6 col-sm-10"> 
      <li>B</li> 
      </div> 
      <div class="col-xs-4 col-sm-10"> 
       <li>Cr</li> 
      </div> 
     </ul>  
    </div> 

Answer 1

通常は、要素をxsスクリーンに縦に積み重ね、大きなスクリーン（sm）に横向きに置いておきたいので、実際には逆の場合があります。最初のスタッキングsmレイアウトを作成し、プッシュプル..

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-sm-4"> 
     <ul class="row prod-group"> 
      <li class="col-xs-6 col-sm-10 col-xs-push-2 col-sm-push-0"> 
       B 
      </li> 
      <li class="col-xs-2 col-sm-10 col-xs-pull-0 col-sm-pull-0"> 
       C 
      </li> 
      <li class="col-xs-4 col-sm-10 col-xs-pull-8 col-sm-pull-0"> 
       A 
      </li> 
     </ul> 
    </div> 
    </div> 
</div> 

デモhttp://www.codeply.com/go/yMxh8sGwMZ

を使用してxsを調整することはまた、適切なパディングにrow内のあなたの列を維持することを忘れないでください。

Answer 2

-sm-に表示する順序で要素を記述してください。 はその後-xs-で自分の位置を調整：ところで

<div class="row"> 
    <div class="col-sm-12 col-xs-4 col-xs-push-4"> 
     B 
    </div> 

    <div class="col-sm-12 col-xs-4 col-xs-push-4"> 
     C 
    </div> 

    <div class="col-sm-12 col-xs-4 col-xs-pull-8"> 
     A 
    </div>  
</div> 

を、あなただけのULならびになど他の要素を使用していないの直接の子として李を使用する必要がありますdiv直接内部ulは無効です。