Как поменять порядок div блоков в мобильной версии за счет css

Сегодня, создавая сайт, грамотный разработчик сразу задумывается о его мобильной версии. Очень часто бывает, что в ПК блоки нужно расположить одним образом, а в телефоне поменять местами.

Например, посмотрите на картинку верстки ниже. Здесь используется верстка через float: left для картинки и текста с кнопкой в обоих блоках.

Теперь, если мы уменьшим экран, то картинка дома внизу станет не в нужном месте. Так как в структуре она стоит первой.

А нам нужно достичь такого результата (т.е. поменять местами блок с текстом и картинкой)

Делается это очень просто через display: flex и order. Чтобы проще было понять идею, рассмотрим такую структуру:

<div class="rowall">
<div class="col1">Первый</div>
<div class="col2">Второй</div>
<div class="col3">Третий</div>
<div class="col4">Четвертый</div>
</div>

Поменяем порядок блоков задом-наперед с помощью этого css стиля:
<style>
.rowall {display: flex;flex-flow: wrap;}
.col1, .col2, .col3, .col4 { width: 100%;}
.col1 {order: 3;}
.col2 {order: 2;}
.col3 {order: 1;}
.col4 {order: 0;}
</style>

Если вы запустите этот пример на своем сайте, то увидите, что последний блок стал первым, предпоследний - вторым и т.д. Чтобы менять порядок блоков мы используем свойство order с указанием порядкового номера блока. Заметьте, счет идет с нуля. Родительскому элементу назначили display: flex; flex-flow: wrap; чтобы можно было сортировать его потомков.

Таким образом при ширине экрана, например, меньшей 768px мы легко можем добавить свойство display: flex; и менять порядок любых html элементов, как нам вздумается.

А вообще рекомендую избавляться от float-а и смело переходить на flex, так как у него гораздо больше возможностей в верстке и он адаптивен на современных платформах.