Как поменять колонки местами в bootstrap?

Question

[xlo240]

Задача такая:
колонка col-sm-9, за ней следует col-sm-3
Нужно чтобы в col-xs-12 они поменялись местами.

<div class="container">

<div class="row">
  <div class="col-sm-9 col-xs-12 col-xs-push-?">красный блок</div>
  <div class="col-sm-3 col-xs-12 col-xs-pull-?">зеленый блок</div>
</div>

</div>

jsfiddle.net/xlo240/8yxduv8u/8/

Как правильно написать?
Нужно чтобы в мобильной версии зеленый блок был выше красного

Answer 1

[sergey]

Вначале выставляем блоки так как они должны быть в итоге, и потом уже пляшем от этого

<div class="container">
  <div class="row">
    <div class="col-sm-3 col-sm-push-9">зеленый блок</div>
    <div class="col-sm-9 col-sm-pull-3">красный блок</div>
  </div>
</div>

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

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

jsfiddle

Answer 2

[iBird Rose]

jsfiddle.net/8yxduv8u/11
p.s. и ты не правильно рассматриваешь изменение местами. ты сразу в html должен создать блоки так - как ты хочешь чтобы они выглядили при col-xs-12. а уже для sm,md,lg и т.д. через push и pull менять их местами