jquery - 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 添加 float ..

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

这应该会得到您想要的布局。