html - 如何用这样的 Bootstrap3 创建一个 3 列的布局？

Question

我有 3 个列，分别命名为 Left、Main 和 Right，我希望它们这样排列:

总经理:

Left(3)|Main(6)|Right(3)

SM:

Main(12)
Left(6)|Right(6)

XS:

Main(12)
Left(12)
Right(12)

这是我的代码:

<div id="main-content" class="col-xs-12 co-md-offset-3 col-md-6">
</div>
<div id="left-sidebar" class="col-xs-12 col-sm-6 col-md-3 col-md-offset-0 pull-left">
</div>
<div id="right-sidebar" class="col-xs-12 col-sm-6 col-md-3 col-md-offset-0">
</div>

但是Main列在MD模式下的布局不正确。那么正确的代码是什么？

(ps:如果可能，最好将Main div放在文档的最上面。)

谢谢。

Answer 1

你可以像这样使用push pull..

    <div class="row">
        <div id="main-content" class="col-xs-12 col-md-push-3 col-md-6">main
        </div>
        <div id="left-sidebar" class="col-xs-12 col-sm-6 col-md-3 col-md-pull-6">left
        </div>
        <div id="right-sidebar" class="col-xs-12 col-sm-6 col-md-3">right
        </div>
    </div>

演示:http://codeply.com/go/rWmJU4aNds