レスポンスでブートストラップcol divの順序を変更することは可能ですか？

Question

私は3を持っていますcol-md-4(1)col-md-4(2)col-md-4(3)col-md-12です。モバイルまたはタブレットで私は中間col-md-4(2)を最初に表示し、次にcol-md-4(1)col-md-4(3)を表示したいと思います。ブートストラップに関してこれを正しく行う方法は？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-12"> 
 
     <div class="col-md-4"> 
 
      <p>abcd</p> 
 
     </div> 
 
     <div class="col-md-4"> 
 
     <p>xyzs</p> 
 
     </div> 
 
     <div class="col-md-4"> 
 
     <p>mnop</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

最初の2つの列の順序を変更し、より大きな画面で再配置するcol-xx-pushとcol-xx-pullを使用します。

あなたが pushとを使用することはできません

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
 

 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-12"> 
 
     <div class="col-md-4 col-md-push-4"> 
 
     <p>Column 2</p> 
 
     </div> 
 
     <div class="col-md-4 col-md-pull-4"> 
 
     <p>Column 1</p> 
 
     </div> 
 
     <div class="col-md-4"> 
 
     <p>Column 3</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

あなたの列が全幅（あなたのケースでは、md以下）のときはになるので、それらをDOMの正しい順番に並べる必要があります。