Адаптивные два блока, как при уменьшении экрана правый блок сделать первым?

Question

[Антон Вебсайтовский]

Здравствуйте

Адаптивные блоки, при уменьшении экрана оба блока переносятся и растягиваются на 100%, как сделать чтобы правый блок становился первым.

Вот рабочий пример с адаптацией на css:
https://jsfiddle.net/sbmxh5zd/

Comments

[Сергей delphinpro]

order: -1;
https://jsfiddle.net/adc7hfkt/

[Антон Вебсайтовский]

Сергей delphinpro, Спасибо, первый раз вижу эту функцию. а что это за функция order:-1;

[Сергей delphinpro]

Антон Вебсайтовский, https://developer.mozilla.org/ru/docs/Web/CSS/order

[Антон Вебсайтовский]

Сергей delphinpro, Спасибо.

Answer 1

[Dima Polos]

flex-wrap: wrap-reverse, order, flex-direction: column-reverse.

Comments

[Антон Вебсайтовский]

это куда?

[Ankhena]

Антон Вебсайтовский, это три разных варианта, как получить то, что вам нужно

[Dima Polos]

Антон Вебсайтовский, это в css, как у Вас со знанием флексбоксов в целом? Вы на фидл.нет используете в стилях флексы, вот три разных способа добиться одного и того же эффекта, что Вам нужно. Попробуйте один из них Если есть вопрос как, погуглите то, что я написал и гугл даст ответ в два счета, Вам по сути надо всего одну строчку прописать;)
Если с флексами туго, вот супер тренажер: https://flexboxfroggy.com/#ru

Answer 2

[Roman Chuvilev]

Добавить в CSS:

media (max-width: 768px) {
.z1 {
flex-direction: column-reverse;
flex-wrap: nowrap;
}
}