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 在它是移动设备时可见。如果需要，您可能需要更改类以适应平板电脑。
2. 我建议将左侧栏的内容移动到部分视图，然后在两个 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>

我做了什么：

1. 添加clearfix到，container div因为我们是浮动 div
2. 在标记中首先制作正确的内容
3. 添加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