css – 使左侧栏出现在带有引导3的移动设备上的右侧栏下

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

问题在http://bootply.com/89871说明

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

解决方法

可能会有更好的方法来做到这一点，但是这里我会做的：

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

我做了什么：

>由于我们是浮动div，所以将清除添加到容器div>在标记中首先制作正确的内容>添加向右和向左拉以浮动内容应该在哪里