Bootstrap 3: reorder .col-X items when collapsing

Question

I have the following layout when on a large display:

AAA BBB
AAA CCC

(all A, all B, and all C form one div, so there are three elements here)

Now that this happens, I want him to become

BBB
AAA
AAA
CCC

I tried to specify the elements in that order in the HTML, but then the best I could get for an advanced view was (using .push-X classes)

AAA BBB
AAA
    CCC

The only solutions I can think of are moving around JS or having duplicates CCCin the correct position and showing and hiding them depending on the size of the viewport.

Is there a cleaner way to do this?

Answer 1

<div class="row">
   <div class="col-xs-12 col-md-6 col-md-push-6">BBB</div>
   <div class="col-xs-12 col-md-6 col-md-pull-6">AAA</div>
   <div class="col-xs-12 col-md-6 ">AAA</div>
   <div class="col-xs-12 col-md-6 ">CCC</div>
</div>

This will work.

?... -, ( "" , .

BBB
AAA
AAA
CCC

, , :

BBB AAA  <--- wrong order
AAA CCC

, , BBB , AAA

BBB------>.
.<------AAA

Answer 2

, , , , . - bootply : fooobar.com/questions/275960/...