html - Bootstrap - Using Push/Pull with col-12? -

i've discovered push/pull bootstrap, can see can re-order columns different screen sizes so:-

<div class="col-md-4 col-sm-4 col-md-push-0 col-xs-push-4">1</div> <div class="col-md-4 col-sm-4 col-md-pull-0 col-xs-pull-4">2</div> <div class="col-md-4 col-sm-4">3</div> 

which works fine, in above example 2 comes before 1 on smaller screens.

what if wanted sm columns 12? how work then? i've tried:-

<div class="col-md-4 col-sm-12 col-md-push-0 col-xs-12 col-xs-push-12">1</div> <div class="col-md-4 col-sm-12 col-md-pull-0 col-xs-12 col-xs-pull-12">2</div> <div class="col-md-4 col-sm-12 col-xs-12">3</div> 

but 1 , 2 disappear on smaller screen sizes now?

so wanting achieve:-

<div class="col-sm-12">2</div> <div class="col-sm-12">1</div> <div class="col-sm-12">3</div> 

for smaller devices if makes sense?

here jsfiddle - in advance!

you reverse things! write base code 2,1,3 push pull until looks way want on bigger screen.

that's whole mobile first thing.

<div class="row">   <div class="col-md-4 col-sm-4 col-md-push-4">2</div> <!-- push column -->   <div class="col-md-4 col-sm-4 col-md-pull-4">1</div> <!-- pull column -->   <div class="col-md-4 col-sm-4">3</div> </div> 

fiddle

this breaks above md idea