如何在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" );