Question

我的正常布局是：

|A||C|

|B||C|

有两列 - 左和右。＆＃39; A＆＃39;和＆＃39; B＆＃39;是两列左列＆＃39; C＆＃39;是对了。

当我调整大小时，我希望它回复如下：

|A|

|C|

|C|

|B|

代码：

<div class="container row">
    <div class="col-sm-8">
            <div class="row">
                a
            </div>
            <div class="row">
                b
            </div>
    </div>
    <div class="col-sm-4">
        c
    </div>
</div>

我想我找到了基于Dan的解决方案

<div class="container">
    <div class="row">
        <div class="col-sm-8">
            <div class="col-sm-12 col-xs-12" style="background-color: red">a</div>
            <div class="col-sm-6 col-xs-12 visible-xs" style="background-color: blue">c</div>
            <div class="col-sm-12 col-xs-12" style="background-color: orange">b</div>
        </div>
        <div class="col-sm-4 hidden-xs">
            <div class="col-sm-12 col-xs-12" style="background-color: blue">c</div>
        </div>
    </div>
</div>

Answer 1

根据我对您的需求的理解，您可以按照预期的方式使用bootstrap完成重新排序：

<div class="container">
    <div class="row">
        <div class="col-sm-6 col-xs-12">a</div>
        <div class="col-sm-6 col-xs-12">c</div>
        <div class="col-sm-push-6 col-sm-6 col-xs-12">c</div>
        <div class="col-sm-pull-6 col-sm-6 col-xs-12">b</div>
    </div>
</div>

jsFiddle

这是关于订购的官方bootstrap文档的link。

根据评论进行更新：

以下是使用bootstrap的解决方案：

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <div class="col-sm-12 col-xs-12">a</div>
            <div class="col-sm-12 col-xs-12">c</div>
            <div class="col-sm-12 col-xs-12 visible-xs">c</div>
            <div class="col-sm-6 col-xs-12 visible-xs">b</div>
        </div>
        <div class="col-sm-6 hidden-xs">
            <div class="col-sm-12 col-xs-12">c</div>
            <div class="col-sm-12 col-xs-12">b</div>
        </div>
    </div>
</div>

jsFiddle

Answer 2

.col-*-push-*和.col-*-pull-*用于重新排列不同屏幕尺寸的列。因此，您可以在列C2上使用.col-sm-pull-6，在列B上使用.col-sm-push-6。只需调整推/拉到布局所需的列数。

了解更多信息：getbootstrap.com/css/#grid

Answer 3

也可以使用float作为解决方案（如果你不想使用推/拉）

HTML

.a,.b,.c{height:60px;}
.a{background:red;}
.b{background:yellow;}
.c{background:blue;float:right;}
@media screen and (max-width:767px){
    .c{float:none;}

的CSS

{{1}}

这是一个jsfiddle jsfiddle

如何在引导程序的响应期间在另一列的两行之间插入一列

3 个答案:

jsFiddle