左侧边栏显示在带有引导程序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