css - 使用 bootstrap 3 使左侧边栏出现在手机的右侧栏下方

Question

我有一个侧边栏位于左侧的布局。这在桌面浏览器上不是问题。然而，当它调整到移动设备时，侧边栏出现在主栏上方。

此问题在 http://bootply.com/89871 中有说明。

有谁知道如何让它们交换？如果可能，我更喜欢 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>

我做了什么:

1. 添加类 hidden-sm 和 visible-sm 以隐藏第一个 div，并使第三个 div 在移动设备上可见。如果需要，您可能需要更改类(class)以适应平板电脑。
2. 我会建议将左侧栏的内容移动到局部 View ，然后在两个 div 中加载该局部 View 。这样您就没有重复的内容。

更新

这种方式比较好:

<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>

我做了什么:

1. 将 clearfix 添加到 container div 因为我们是 float div
2. 在标记中首先制作正确的内容
3. 添加pull-right 和pull-left 将内容 float 到应有的位置