如何在Bootstrap中对垂直列进行重新排序？

Question

我想知道是否可以在Bootstrap 3上重新排列垂直列。

 .col-xs-8 { background: magenta; } .col-xs-4 { background: cyan; } .col-xs-12 { background: yellow; } 

 <div class="container"> <div class="row"> <div class="col-xs-8">Content</div> <div class="col-xs-4"> <div class="row"> <div class="col-xs-12 col-xs-push-12">A</div> <div class="col-xs-12">B</div> <div class="col-xs-12">C</div> <div class="col-xs-12">D</div> </div> </div> </div> </div> 

的jsfiddle

我想要的是将侧边栏上的项目从ABCD移到BCAD

Answer 1

响应式布局无法完成​​您想要实现的目标.....但是如果您拥有静态内容，则可以使用margin s完成：

这是一个演示

将您的排序div包装在某些父div中，并对其进行响应式布局。...在演示中，我通过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>

编辑：

具有百分比值的演示

在%ge ，您可以创建以下内容：

 <div class="abcd">
   <div class="col-xs-12" style="margin-top:-13%;color:#000;">A</div>
   <div class="col-xs-12" style="margin-top:-33%;color:#000">B</div>
   <div class="col-xs-12" style="margin-top:-23%;color:#000">C</div>
   <div class="col-xs-12" style="margin-top:-3%;color:#000">D</div>
 <div>

CSS

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

Answer 2

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

您可以使用jquery做到这一点。 观看演示

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