Question

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

桌面布局（md）：

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

移动布局（xs）：

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

知道怎么做到这一点？基本上我必须用两列闯入第二行，我猜......

Answer 1

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

DEMO 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>

Bootstrap 3：打破响应不同的行

1 个答案: