Bootstrap 3以響應式佈局排列網格列

Question

我使用Bootstrap 3並喜歡重新排列移動佈局中的網格列。

桌面看起來就像是截圖：

那裏開手機，畫面轉到底部，是不是可以放置圖片的重新排序網格列頂部當用戶在移動版本中查看？對於輸出

代碼：

<div class="container"> 
    <div class="row"> 

     <div class="col-sm-8 col-lg-9"> 
      <div>John Smith</div> 
      <div>Application Engineer</div> 
      <div> 
       <dl class="dl-horizontal"> 
        <dt>Reg. Number</dt><dd>M8553</dd> 
        <dt>Mobile Number</dt><dd>012-5229887</dd> 
        <dt>Email</dt><dd>john.smith@email.com</dd> 
       </dl> 
      </div> 

      <div class="row"> 
       <div class="col-xs-12 col-lg-2"><img src="QR-code.png" width="78" /></div> 
       <div class="col-xs-12 col-lg-10"> 
        <div>        
         <span> 
         <button type="button" class="btn btn-primary" data-id="10"><span class="fa fa-fw fa-thumbs-o-up"></span> Like</button> 
         </span>&nbsp;&nbsp; 

         <a class="btn btn-success btn-alink" role="button" href="mailto:feedback@email.com?subject=Feedback"><span class="fa fa-fw fa-envelope-o"></span> Send us your feedback</a> 
        </div> 
        <div><span>0</span> liked, 63 views.</div> 
       </div> 
      </div> 
     </div> 
     <!-- /.col-lg-9 --> 

     <div class="col-sm-4 col-lg-3"> 
      <img src="images/john-smith.jpg" alt="john-smith"> 
     </div> 
     <!-- /.col-lg-3 --> 

    </div> 
    <!-- /.row --> 
</div> 

Answer 1

看看這個

列排序 輕鬆改變的順序我們內置有.col-網格列md-push- *和.col-md-pull- *修飾符類。

繼承人鏈接http://getbootstrap.com/css/