推/拉多行列答案

【问题标题】：Push/pull multi row columns推/拉多行列
【发布时间】：2014-09-05 06:39:57
【问题描述】：

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

现在，我只写了一个 <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 之类的东西，怎么走？

谢谢。

【问题讨论】：

不使用 Flexbox 或 jQuery 或使用 css 隐藏和显示和复制 html 无法完成。

标签： html css twitter-bootstrap responsive-design twitter-bootstrap-3

【解决方案1】：

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

【讨论】：

你能提供一个简单的例子，只是给我一个想法？
提供的链接上有一个示例，谷歌搜索提供了大量示例。

【解决方案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/

【讨论】：

col-sm-4 col-md-4 col-lg-4 是高度冗余的，等同于简单的col-sm-4!
谢谢，但这不是我要找的。我不想复制区域，黄色框不是身体。这是一列。