Question

我在使用Bootstrap 3网格系统找出改变某些模块位置的方法时遇到了麻烦。

这是我想要的xs屏幕的排序（非常简单，只是相互堆叠）。

[       1       ]
[       2       ] 
[       3       ] 
[       4       ]

然而，在sm和更大的时候，我想将模块4移到模块1下面，并将模块2和3放在模块4的右边。这是标准Bootstrap网格可以实现的吗？

例如（请注意，有两个4个框用于说明4可能更大2和3。

[       1       ]
[    4    ][  2 ]
[    4    ][  3 ]

我在这里尝试过：http://jsfiddle.net/5prkr2tn/1/但是我无法弄清楚如何向上移动第4列:(。我曾试图做一些推/拉但是当我做的时候当我使用它们时，似乎无法将2/3叠加在一起。

Answer 1

当然可以。您只需要将第二列和第三列拆分为具有自己行的列。然后你可以推拉第四列和第二列和第三列。

http://jsfiddle.net/jxu42vst/

<div class="container">
    <div class="row">
        <div class="box-1 col-sm-12">1</div>
        <div class="col-sm-4 col-sm-push-8">
            <div class="row">
                <div class="box-2 col-sm-12">2</div>
                <div class="box-3 col-sm-12">3</div>
            </div>
        </div>
        <div class="box-4 col-sm-8 col-sm-pull-4">4</div>
    </div>
</div>

Bootstrap 3响应 - 在网格中上下移动模块

1 个答案: