html - 推/拉多行列

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/ )