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

Question

[werder33]

Подскажите как поменять блоки местами при уменьшении разрешения.

<div class="col-xs-12 col-md-12  col-md-push-12 test1">
    1 блок
  </div>
  <div class="col-xs-6 col-md-6 col-md-pull-12 test2">
    2 блок
  </div>
  <div class="col-xs-6 col-md-6 col-md-pull-12 test3">
    3 блок
  </div>

нужно чтобы блоки 2 и 3 шли вверху , а блок 1 снизу.
Что-то вообще запутался с pull и push и голова не варит.
Заранее спасибо
Нужно так:

Answer 1

[Антон]

Думаю, в данном случае лучше использовать @media.
При определённом разрешении применять float: left к классам колонок.

Comments

[Дмитрий Ким]

Вы видимо не знакомы с Bootstrap? Он уже умеет это делать классами.

[Антон]

Дмитрий Ким: я знаком с bootstrap и классами pull-left и pull-right, а Вы, видимо, не знакомы с CSS3 и media.

[Дмитрий Ким]

Антон: Ну так, а зачем писать своим медиа-запросы, если можно просто вставить пару классов, в которых уже прописаны соответствующие медиа-запросы? Эти классы и служат вам для того, чтобы не писать лишего, когда можно обойтись их предназначением.

[Антон]

Дмитрий Ким: а условие как написать через css? Правильно, используя media.

[Дмитрий Ким]

Антон: все уже прописано в Bootstrap классах col-xx-pull-nn и col-xx-push-nn до вас.

[Антон]

Дмитрий Ким: хм, а вот про col-xx-pull-nn и col-xx-push-nn не знал. Спасибо)

[Дмитрий Ким]

Антон: Вы все же не знакомы с Bootstrap :-)

[Антон]

Дмитрий Ким: знаком, но, видимо, не так глубоко)

Answer 2

[Дмитрий Ким]

Ловите: codepen
При lg порядок: 1-2-3
При md порядок: 2-3-1
Для других разрешений сами уже додумаете.