css - Bootstrap 3中屏幕分辨率降低时从右到左堆叠列

Question

在 Bootstrap 3 中，如果我有以下内容：

<div class = "row">
     <div class = "col-md-6" id = "one">
     <div class = "col-md-6" id = "two">
</div>

我开始减小浏览器的宽度，DIV "two" 最终会在 DIV "one" 下面形成一个新行。我将如何反转堆叠顺序以使 DIV“一”堆叠在 DIV“二”之下？

Answer 1

您可以使用Bootstrap (和) 中的新列排序类来执行此操作，但您需要确保元素在 DOM 中出现的顺序是您希望它们“堆叠”时的顺序：.col-md-push-*.col-md-pull-*

<div class="row">
    <div class="col-md-6 col-md-push-6" id="two">Two</div>
    <div class="col-md-6 col-md-pull-6" id="one">One</div>
</div>

演示小提琴