Boostrap cambiar orden de las colunas

[moscrates]

Hola, estoy intentando cambiar el orden de las columnas cuando este en dispositivos pequeños y no me queda

en grandes se ve:

[6 Rojo][6 Azul]
cuando se hace pequeño queda
[12 Rojo]
[12 Azul]

Lo que necesito hacer es que cuando este pequeño se vea
[12 Azul]
[12 Rojo]

lo he intentando con pull y push pero eso solo funciona cuando entre los dos div ocupan las 12 columnas

Código HTML:

<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-sm-pull-12 col-xs-pull-12">
Rojo
</div>
 
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-sm-pull-12 col-xs-pull-12">
Azul
</div>