html - 使用 Bootstrap 的非平凡响应式网格布局

Question

我正在尝试使用 Bootstrap 3 获得以下响应式布局，但直到现在我都失败了:

md 和 lg 屏幕:

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

xs 屏幕:

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

sm 屏幕(奖励):

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

这可能吗？

更新:这是我到目前为止所做的:jsfiddle .

我第一次尝试按照@Filype 的建议使用嵌套列，但我意识到这样我无法将元素从嵌套列中移入移出，所以我认为这不是正确的方法。

Answer 1

下面是如何在 Bootstrap 中实现此布局的开始:

<!--
+-------+-------+------+
|   A   |   B   |   C  |
+-------+       +      +
|   D   |       +------+
|       +-------+   E  |
+-------+       +------+
 -->


<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="row">
                <div class="col-md-12">
                    A
                </div>
                <div class="col-md-12">
                    D
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="row">
                <div class="col-md-12 b-row">
                    B
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="row">
                <div class="col-md-12">
                    C
                </div>
                <div class="col-md-12">
                    E
                </div>
            </div>
        </div>
    </div>
</div>

结果版本可见https://jsfiddle.net/dvbnchp4/3/embedded/result/