Question

目前正在开发Bootstrap 3布局，但我无法弄清楚如何创建以下布局。可能没有重复内容并将其隐藏在某些断点时是不可能的。

平板电脑和桌面视图应如下所示：

+------+------+
|  A   |  D   |
+------|      |
|  B   +------+
+------|  E   |
|  C   |------+
+------+

移动视图应如下所示：

+------+
|  D   |
|      |
+------+
|  A   |
+------+
|  B   |
+------+
|  E   |
+------+
|  C   |
+------+

我正在努力实现的是将移动视图中的D移动到B和C之间的A和E之上。我知道我可以推/拉柱子并将A移到A上方工作正常。但是我无法想出一种在B和C之间拉E的方法 - 这是否可能？

有人有建议吗？

Answer 1

是的，是;）

正如您已经说过的，这可以使用Bootstap 3的.col-??-push-*和.col-??-pull-*类来完成。有关详细信息，请参阅您可能已经发现的column ordering上的bootstrap 3文档中的相应部分。你的代码看起来很......如下：

<div class="row">
    <div class="col-sm-6 col-sm-push-6">
        Content D
    </div>
        <div class="col-sm-6 col-sm-pull-6">
        Content B
    </div>
    <div class="col-sm-6 col-sm-pull-6">
        Content A
    </div>
        <div class="col-sm-6 col-sm-push-6">
        Content E
    </div>
    <div class="col-sm-6">
        Content C
    </div>
</div>

请参阅此作品bootply作为示例。

Bootstrap 3：在两者之间移动列

1 个答案: