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

Question

我有 3 列名为 Left、Main 和 Right，我希望它们按如下方式排列：

MD：

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

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

How to create a layout with 3 columns with Bootstrap3 like this?

html

css

responsive-design

twitter-bootstrap-3