Html 如何在引导中切换两列的位置

我曾试图用bootstrap实现一个三栏网站，现在有了

[left-sidebar] [main-content] [right-sidebar]

当在移动视图中查看此布局时，它会变成这样

[left-sidebar] 
[main-content] 
[right-sidebar]

所以我想用

[左侧边栏]

[main-content]
[left-sidebar]  
[right-sidebar]

这是我使用的代码

<div class  = "row">
    <div class = "col-md-3">
        [left-sidebar]
    </div>
    <div class = "col-md-6">
        [main-content]
    </div>
    <div class = "col-md-3">
        [right-sidebar]
    </div>
</div>

[左侧边栏]
[主要内容]
[右侧边栏]

试试这个：

<div class="row">
    <div class="col-md-6 col-md-push-3">
        [main-sidebar]
    </div>
    <div class="col-md-3 col-md-pull-6">
        [left-content]
    </div>
    <div class="col-md-3">
        [right-sidebar]
    </div>
</div>

[主边栏]
[左内容]
[右侧边栏]