Как сделать перестановку блоков в мобильной версии верстки?

Question

[vacoo]

Есть два блока

<div class="col-md-6 col-xs-12">1</div>
<div class="col-md-6 col-xs-12">2</div>

Они лежат горизонтально. В мобильной версии второй блок уходит вниз. Как сделать так чтобы в мобильной версии второй блок пошел вверх без перестроения блоков.

Answer 1

[Алексей]

Использовать pull и push Column ordering у Вас же Bootstrap?

vacoo: Применяйте к col-md
1 будет 2 в дестопе и 1м в мобильной.
2 будет 1 в десктопе и 2й в мобильной.

Comments

[vacoo]

Да. Но такое прокатывает только с колонками меньше 12. А у меня горизонтальные

[Алексей]

vacoo: Применяйте к col-md
1 будет 2 в дестопе и 1м в мобильной.
2 будет 1 в десктопе и 2й в мобильной.

[vacoo]

Алексей Кузьмин: Блин как я не додумался до этого!)) спасибо большое!!!

Answer 2

[sergski]

используйте flexbox:

<div class="box">
  <div class="col-md-6 col-xs-12">1</div>
  <div class="col-md-6 col-xs-12">2</div>
</div>

1-2

.box {
  display: flex;
  flex-direction: column;
}

2-1

.box {
  display: flex;
  flex-direction: column-reverse;
}