Twitter bootstrap 3 - 列排序

Question

我有关于 jsfidle 的例子。我想重新排列方框，如下所示：

谢谢你的想法

Answer 1

为了实现此结构，您需要将 "content" div 向右拉至 sm，向左拉至 xs。[bootstrap-pull-left-for -小型设备][1]

这篇 link 将帮助您做到这一点..

所以，html 将是

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-4 col-xs-12">Menu</div>
        <div class="col-sm-6 col-xs-12  pull-right-sm pull-xs-left">content</div>
        <div class="col-sm-4 col-xs-12">
            <div class="row">
                <div class="col-sm-12">News</div>
                <div class="col-sm-12">Photo</div>
            </div>
        </div>
    </div>
</div>

和CSS将是

 @media (max-width: 767px) {
     .pull-xs-left {
       float: left;
     }
 }
 @media (min-width: 768px) and (max-width: 991px) {
    .pull-sm-right {
      float: right;
    }
 }

Answer 2

只需在内容栏中使用 pull-right class.. 不需要额外的 CSS:

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-4 col-xs-12">
            menu
        </div>
        <div class="col-sm-8 col-xs-12 pull-right">
            content
        </div>
        <div class="col-sm-4 col-xs-12">
            <div class="row">
                <div class="col-sm-12">
                      news
                 </div>
                <div class="col-sm-12">
                      photo
                 </div>
            </div>
        </div>
    </div>
</div>

演示：http://bootply.com/i4o2KxdEjK

Twitter bootstrap 3 - 列排序

Twitter bootstrap 3 - Column ordering

twitter-bootstrap

twitter