Html 使用bootstrap的非平凡响应网格布局

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

md和lg屏幕：

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

xs屏幕：

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

sm屏幕（奖金）：

可能吗

更新：以下是我到目前为止所做的：

---

我的第一次尝试使用了@Filype建议的嵌套列，但我意识到这种方式无法将项目从嵌套列移入移出，因此我认为这不是正确的方式。

以下是如何在引导中实现此布局的开始：

<!--
+-------+-------+------+
|   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>

A.
D
B
C
E

---

结果版本见

到目前为止您做了什么？有一个fiddlejs示例会很有帮助。

<!--
+-------+-------+------+
|   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>