<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>在标记中首先制作正确的内容>添加向右和向左拉以浮动内容应该在哪里