Question

我有一个侧边栏位于左侧的布局。这在桌面浏览器上不是问题。但是，当它重新调整为移动设备时，侧栏会显示在主列上方。

上说明

有谁知道如何让他们交换？如果可能的话，我更喜欢CSS解决方案。

Answer 1

可能有更好的方法可以做到这一点，但这就是我要做的事情：

<div class="container"> 
    <div class="row">
      <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 side hidden-sm">
        Left (Side) - Move content to Partial View
      </div>
      <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 main">
        Right (Main) - Should be first when Mobile 
      </div>
      <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 side visible-sm">
        Bottom - Load content from Partial VIew
       </div>
    </div>    
</div>

我做了什么：

添加课程hidden-sm和visible-sm以隐藏第一个div，并在移动设备上显示第三个div。如果需要，您可能需要更改类别以调整平板电脑。
我建议将左侧栏的内容移动到局部视图，然后在两个div中加载该部分。这样您就没有重复的内容了。

更新

这种方式更好：

<div class="container clearfix"> 
    <div class="row">
      <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 main pull-right">
        Right (Main) - Should be first when Mobile 
      </div>
      <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 side pull-left">
        Left (Side) - Move content to Partial View
      </div>
    </div>    
</div>

我做了什么：

将clearfix添加到container div，因为我们是浮动div
在标记中首先制作正确的内容
添加pull-right和pull-left以将内容浮动到

Answer 2

更干净的方法是使用Bootstrap的本地列排序类。

“使用.col-md-push- *和.col-md-pull- *修饰符类轻松更改内置网格列的顺序。”

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

将导致左栏出现在左侧的右侧和右侧。

来源：http://getbootstrap.com/css/#grid-column-ordering

左侧边栏显示在带有引导程序3的移动设备的右侧列下方

2 个答案:

更新