How can I reorder vertical columns in Bootstrap?

Question

I wan to know if it's possible to re-order vertical columns on 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

What I want it's to move the items on the sidebar from ABCD to BCAD

Answer 1

What you want to achieve can not be done for responsive layout.....but assuming you have static content then, it can be done using margin s :

Here is a demo

Wrap your ordering divs in some parent div and apply responsive layout to it....in the demo, i have dome that through abcd class ( its not responsive though since its in pixels )

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>

EDIT :

demo with percentage value

In %ge , you can vreate something like :

 <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

Assuming you have to insert first child just before the last child.

You can do it with jquery. See Demo

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