Javascript 如何在引导中重新排列垂直列？

我想知道是否有可能在Bootstrap3上重新订购垂直列

.col-xs-8{
背景：洋红；
}
.col-xs-4{
背景：青色；
}
.col-xs-12{
背景：黄色；
}

内容
A.
B
C
D

假设必须在最后一个孩子之前插入第一个孩子

您可以使用jquery来实现这一点

$( ".flexbox div:first" ).append().insertBefore( ".flexbox div:last" );

---

对于响应式布局，您想要实现的目标是无法实现的……但假设您有静态内容，则可以使用

margin

s：

这是一个

将您的订购div包装在某个父div中，并对其应用响应式布局……在演示中，我使用了dome through

abcd

类（虽然它没有响应，因为它以像素为单位）

HTML

<div class="abcd">
   <div class="col-xs-12 " style="margin-top:-110px;color:#000">A</div>
   <div class="col-xs-12" style="margin-top:-150px;color:#000">B</div>
   <div class="col-xs-12" style="margin-top:-130px;color:#000">C</div>
   <div class="col-xs-12" style="margin-top:-90px;color:#000">D</div>
 <div>

CSS

.abcd {
    margin-top:33%;/* keep this equal to margin of B, but with opposite sign */
}

---

为什么不改变标记中的顺序呢？您使用的列大小是

xs

，因此无论屏幕大小如何，布局都是相同的。我使用的是xs类，因为演示的小提琴空间太小，无法看到布局。

.abcd {
    margin-top:33%;/* keep this equal to margin of B, but with opposite sign */
}