如何让子 div 在使用引导或 CSS 调整窗口大小时保持高于其他子级

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的推拉来弄清楚。这个线程对我帮助很大： 引导 3：仅在较小的屏幕尺寸上推/拉列 谢谢大家的帮助！

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;
}
}

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