推/拉多列列

Question

我不知道我的方法是否有意义，但是，我需要实现这样的布局：

现在，我只写了一个<div class="row"></div>并用其中的一列代表每个区域，例如<div class="col-sm-4></div>。

没有黄色区域，这很好用：

<div class="row">
    <div class="col-sm-4 col-sm-push-8">green</div>
    <div class="col-sm-4 col-sm-pull-4">red</div>
    <div class="col-sm-4 col-sm-pull-4">blue</div>
</div>

如何添加黄色区域？没有col-pull-16或类似的东西，还有什么方法可以去？

谢谢。

Answer 1

您需要检查Flexbox和特别是order属性（http://css-tricks.com/snippets/css/a-guide-to-flexbox/）

Answer 2

看看这个。希望它有所帮助。

<div class="row">
    <div class="hidden-xs col-sm-4 col-md-4 col-lg-4">
        RED
    </div>
    <div class="hidden-xs col-sm-4 col-md-4 col-lg-4">
        BLUE
    </div>
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
        Green
    </div>
</div>
<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 navbar-fixed-bottom">
        <div class="row">
            <div class="col-xs-12 hidden-sm hidden-md hidden-lg">
                Red
            </div>
        </div>

        <div class="row">
            <div class="col-xs-12 hidden-sm hidden-md hidden-lg">
                BLUE
            </div>
        </div>
    </div>
</div>

<强>的jsfiddle

http://jsfiddle.net/68n54p47/2/