Bootstrap 3：将响应分成不同的行

Question

我目前正在尝试在 bootstrap 3.2 中实现以下布局，但我真的不知道如何去做。

桌面布局 (md)：

--------------------------------------------
| text1                       |            |
-------------------------------    abc     |
|  text2        |    text3    |    def     |
|               |             |            |
--------------------------------------------

移动布局 (xs)：

--------------------------------------------
| text1                                    |
-------------------------------------------|
|             text2           |            |
------------------------------|    abc     |
|             text3           |    def     |
|                             |            |
--------------------------------------------

知道如何实现吗？基本上我必须用两列打入第二行，我猜...

Answer 1

您可以使用两个右键菜单并隐藏其中一个。

演示 https://jsfiddle.net/maxlipsky/mhfb97ed/1/

<div class="container">
    <div class="row">
        <div class="col-md-9">
            <div class="row">
                <div class="col-xs-12 bg-primary ">
                    text1
                </div>
            </div>
            <div class="row">
                <div class="col-xs-9 col-md-12">
                    <div class="row">
                        <div class="col-xs-12 col-md-6 bg-warning">text2</div>
                        <div class="col-xs-12 col-md-6 bg-success">text3</div>
                    </div>            
                </div>
                <div class="col-xs-3 bg-danger hidden-md hidden-lg">
                    abc<br/>
                    def
                </div>
            </div>
        </div>
        <div class="col-md-3 bg-danger hidden-xs hidden-sm">
            abc<br/>
            def
        </div>
    </div>
</div>