Bootstrap 3 div崩溃顺序

Question

我正在使用Bootstrap 3来构建一个网站。我有如下图所示的布局：

编码如下：

<div class="col-md-12 main-content">
   <div class="col-md-2 sidebar-left">
       <!-- Left sidebar content here -->
   </div>
   <div class="col-md-7 main-articles">
       <!-- Main articles go here -->
   </div>
   <div class="col-md-3 sidebar-right">
       <!-- Right sidebar content here -->
   </div>
</div>

在移动/桌面上观看时，布局显示如下：

1st div - left sidebar (pictured in red)      
2nd div - main-articles (pictured in yellow)  
3rd div - right sidebar (pictured in greenish)

我希望它显示如下：

2nd div - main-articles (pictured in yellow)  
1st div - left sidebar (pictured in red)      
3rd div - right sidebar (pictured in greenish)   

有什么方法可以解决这个问题吗？谢谢。

Answer 1

在您的移动媒体查询下，将浮动添加到您的div中，如此...

#1st{
float:right;
}
#2nd{
float:left;
}
#3rd{
float:right;
}

这应该得到你想要的布局。

Answer 2

试试这个

<div class="row"> <div class="col-sm-7 col-sm-push-2 main-articles"> Main articles </div> <div class="col-sm-2 col-sm-pull-7 sidebar-left"> Left sidebar </div> <div class="col-sm-3 sidebar-right"> Right sidebar </div> </div>

请参阅演示：http://jsfiddle.net/Debananda/y54kX/