Rearrange twitter bootstrap div's to collapse to different order

Question

I have three divs with class="col-md-4 col-xs-6", class="col-md-4 col-xs-12", class="col-md-4 col-xs-6"
It collapses in one row in medium screen view:

    div 1 | div 2 | div 3 

After it is resized to xs:

    div 1 (xs 6) 

    div 2 (xs 12) 

    div 3 (xs 6) 

How can I anchieve this to collapse like this:

    div 1 (xs 6) | div 3 (xs 6) 

    div 2 (xs 12) 

I think I could make div 3 hidden in xs view and make a copy of div 3, placing it after div 1, which becomes visible. But is there any way without dublication?

Answer 1

I have found out on my own how to do this. Heres my solution:

<div class="col-md-4 col-xs-6">1</div>
<div class="col-md-4 col-xs-12">2</div>
<div class="col-md-4 col-xs-6">3</div>

Rewrite as:

<div class="col-md-4 col-xs-6">1</div>
<div class="col-md-4 col-xs-6 pull-right">3</div>
<div class="col-md-4 col-xs-12">2</div>

http://jsfiddle.net/tkgfzzx4/10/