使用 Bootstrap 或 CSS 调整窗口大小时如何让子 div 保持在其他子元素之上

Question

目前，当窗口处于全尺寸时，我有这样的事情：

PARENT
>>> CHILD DIV A (to the left)
>>> CHILD DIV  B (to the right)

当窗口大小调整到一定程度时，它看起来像这样：

PARENT
>>> CHILD DIV A (on top of CHILD DIV B)
>>> CHILD DIV  B (below CHILD DIV A)

但是，我希望它在调整大小时看起来像这样：

PARENT
>>> CHILD DIV A (below CHILD DIV B)
>>> CHILD DIV  B (on top of CHILD DIV A)

我的实际代码是这种格式：

<PARENT (has a left and right margin only)>
    <CHILD DIV A (has bootstrap classes)/>
    <CHILD DIV B (has bootstrap classes)/>
</PARENT>

使用的引导 CSS：

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  float: left;
}

.col-xs-12 {
  width: 100%;
}

我应该如何做到这一点？我试着弄乱对齐和浮动，但似乎没有任何改变。谢谢你的建议！

编辑：我能够使用 Bootstrap 的推拉来解决这个问题。这个帖子对我帮助很大：Bootstrap 3: Push/pull columns only on smaller screen sizes 谢谢大家的帮助！

Answer 1

您可以通过在代码中的“div a”之前制作“div b”并将它们浮动到右侧，然后使用媒体查询在特定宽度上取消浮动来做到这一点。

<PARENT>
    <CHILD DIV B />
    <CHILD DIV A />
</PARENT>

在css中：

child-div-a, child-div-b{

  float: right;
}

@media all and (max-width:700px){
    child-div-a, child-div-b {
        float:none;
    }
}

试一试，告诉我它是否像你想象的那样工作。