Bootstrap Push / Pull Vertically

Question

I wanted to find out if vertical columns can be reordered in Bootstrap 3.

DEMO:

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

Fiddle

What I want to move elements in the sidebar from ABCD to BCAD

If this is not possible with Bootstrap, you can offer an alternative such as a jQuery plugin or similar

thanks.

Answer 1

Assuming you need to insert the first child immediately before the last child.

You can do this with jquery. See demo

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

Answer 2

What you want to achieve cannot be done for a flexible layout ..... but if you have static content, this can be done using margin :

Here is a demo

Wrap your ordering divs in some parent div and apply a responsive layout to it .... in the demo, I have a dome that through the abcd class (doesn’t react, although with 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 create 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 */ }