Bootstrap - change order for all devices

Question

I'm using Bootstrap 3.3.5. In "Medium devices" is all perfect, the structure is: A B C. But when I want show it on Small devices the structure is:

A
C
B

I want:

A
B
C

My code is:

<div class="container">
    <div class="row">
        <div class="col-md-4 col-sm-12">A</div>
        <div class="col-md-4 col-sm-12 col-md-push-4">C</div>                
        <div class="col-md-4 col-sm-12 col-md-pull-4">B</div>   
    </div>
</div>

I can't move divs. I can move only by bootstrap styles.

Demo

Can you help me please? Thank you so much..

Answer 1

You're looking for the "push" and "pull" classes. See Bootstrap Column Ordering Documentation.

EDIT: I think I misunderstood your question. If I'm reading it correctly now, it looks like you're trying to actually switch the position of "c" with the position of "b". If this is the case, that's not possible with Bootstrap alone since you're working with 12 unit columns. There are a few solutions I've found here on stack overflow that use media-query magic to move the divs. Here are some references:

Change the order of col-*-12 columns in Bootstrap 3 by using push/pull

Swap DIV position with CSS only

If you're still having trouble or if you're still not sure how to implement this solution, let me know and we'll work through your code together.