How to change the column order in bootstrap?

The problem is this:
column col-sm-9, followed by col-sm-3
It is necessary to col-xs-12 they changed places.

<div class="container">

<div class="row">
 <div class="col-sm-9 col-xs-12 col-xs-push?">the red block</div>
 <div class="col-sm-3 col-xs-12 col-xs-pull-?">green block</div>
</div>

</div>

jsfiddle.net/xlo240/8yxduv8u/8/

How to write correctly?
You need to in the mobile version the green block was above the red
July 2nd 19 at 17:35
2 answers
July 2nd 19 at 17:37
Solution
First, placing blocks as they should be in the end, and then dance from that
<div class="container">
 <div class="row">
 <div class="col-sm-3 col-sm-push-9">green block</div>
 <div class="col-sm-9 col-sm-pull-3">a red block</div>
</div>
</div>

.col-sm-9 {
 background-color: #F00;
}

.col-sm-3 {
 background-color: #0F0;
}

jsfiddle
July 2nd 19 at 17:39
jsfiddle.net/8yxduv8u/11
p.s. and you do not properly consider the change places. you just need html to create the blocks - how do you want them to look when col-xs-12. but for sm,md,lg, etc. using push and pull to rearrange them

Find more questions by tags BootstrapCSS