当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“one”堆叠在DIV“two”下面？

Answer 1

您可以使用Bootstrap中的新column ordering classes（.col-md-push-*和.col-md-pull-*）执行此操作，但您需要确保元素在DOM中的显示顺序是在“堆积”时你想要它们：

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

<强> Demo fiddle