Bootstrap 3以响应式布局排列网格列

我使用Bootstrap 3并喜欢重新排列移动布局中的网格列。Bootstrap 3以响应式布局排列网格列

桌面看起来就像是截图：

desktop version

那里开手机，画面转到底部，是不是可以放置图片的重新排序网格列顶部当用户在移动版本中查看？对于输出

enter image description here

代码：

<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>[email protected]</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:[email protected]?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>

来源

2014-10-08 conmen

看看这个

列排序轻松改变的顺序我们内置有.col-网格列md-push- *和.col-md-pull- *修饰符类。

继承人链接http://getbootstrap.com/css/

来源

2014-10-08 04:43:52

Bootstrap 3以响应式布局排列网格列

回答

相关问题