How to change the vertical order of Bootstrap grid

Question

My actual layout looks like this:

A B
A B
A B
A
A
..

A Elements are in a div.col-sm-7.col-sm-pull-5 and B Elements are in div.col-sm-5.col-sm-push-7

on mobile it looks like this:

B
B
B
A
A
A
..

Now I want to enter a element C after the B elements:

A B
A B
A B
A C
A
..

on regular displays and on mobile it should look like this:

B
B
B
A
A
A
..
C

Does anybody have a good solution?

Answer 1

Hey i think what you are trying to achieve can be done with push and pull :

"Easily change the order of our built-in grid columns with .col-md-push-* and .col-md-pull-* modifier classes."

This is from bootstrap doc.