可以在響應中更改引導程序col div的順序？

Question

我有3 col-md-4(1)col-md-4(2)col-md-4(3) in col-md-12。在手機或平板電腦上。我想先顯示中間col-md-4(2)然後col-md-4(1)col-md-4(3)。如何在bootstrap方面做到這一點？

<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

重新排序的前兩列，並使用col-xx-push和col-xx-pull重新定位在更大屏幕上：

<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>

不能使用push和pull當你的列是全寬（在你的情況下，在md以下），所以你必須讓他們在DOM中以正確的順序開始。