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

1. 1.Кликаем правой кнопкой по элементу, выбираем «Исследовать элемент» и далее инспектируем его код, что бы видеть какой класс или идентификатор присваивается этому элементу.
   
   В данном случае наш элемент имеет два класса, класс content и класс fleft. Скорее всего, класс content имеет не только этот блок, но еще другие блоки на сайте. Поэтому я буду привязываться к классу fleft, потому, как он выглядит более уникалным.

   По инспектированию кода и определению классов и идентификаторов элементов на сайте я делала отдельную статью, с которой вы можете ознакомиться по этой ссылке.
2. 2.Копируем название этого класса.
3. 3.Далее, нам нужно будет открыть CSS-файл, в котором прописаны стили для вашего сайта. Сайт на примере, которого я буду показывать эти приемы, работает на CMS WordPress, и здесь этот файл находится в папке с активной темой, и называется он style.css.
4. 4.Задаём для этого класса обтекание по правому краю.
   <br<br /><br /> <br.fleft{ float:right;<br}<br<br /><br />

   float:right;

5. 5.Теперь мне нужно определить класс или идентификатор блока в котором находится наш сайдбар.
   
   Мы видим код этого блока, и видим, что у него есть класс fright. Копируем его, и для него приписываем наоборот, обтекание по левому краю.

   <br<br /><br /> <br.fright { float:left;<br}<br<br /><br />

   float:left;

6. 6.Теперь сохраняем изменения в файле, обновляем нашу страницу, и видим, что у нас эти два блока поменялись местами.
   

Вот так мы при помощи буквально нескольких строчек кода, очень быстро поменяли их местами.

Изменяем порядок отображения блоков

Теперь давайте рассмотрим еще один пример. Предположим у нас есть страница с вот такой структурой блоков:

Если мы захотим поменять местами блок с текстом и блок с изображением, нам достаточно будет использовать свойство float и задать ему значение left или right. Однако если мы будем адаптировать эту страницу под мобильные устройства, то увидим, что на маленьких экранах, после перестроения в одну колонку, у нас эти блоки выглядят не очень красиво.

У нас идет в первом блоке сначала изображение, а потом текст, во втором сначала текст, а потом изображение, в третьем опять наоборот. Было бы на много красивее и аккуратнее, если бы у нас и после перестроения все блоки выглядели одинаково.
Например, чтобы во всех блоках сначала была бы задана картинка, а затем текст.
При помощи CSS-свойства float мы уже ни как не можем повлиять здесь на порядок расположения элементов. Однако у нас есть еще одно CSS-свойство display:flex, которое поможет нам реализовать данную задачу.

CSS cвойство display:flex предназначено для гибкой компоновки дочерних элементов. Оно имеет много интересных возможностей, и очень активно используется в современной верстке. В ближайшее время я сделаю отдельную статью или видео, посвященное интересным возможностям и нюансам использования этого свойства.
Если в предыдущем примере мы задавали или изменяли CSS-свойство float конкретно для тех элементов, которые мы хотим поменять местами. То здесь нам нужно будет еще обращать внимание на родительские блоки этих элементов.
Предположим у нас есть блок, который имеет класс text-row, внутри этого блока находится еще два блока, это блок с изображением, и блок с текстом. Блок с изображением имеет класс image-block, а блок с текстом имеет класс description-block.

Наша задача задать для родительского блока тех элементов, которые мы хотим переставить местами, CSS-свойство display:flex и свойство flex-flow. В нашем случае это будет выглядеть вот таким образом:

<br<br /><br /> <br.text-row { display: flex; flex-flow: wrap;<br}<br<br /><br />

.text—row  { display: flex; flex—flow: wrap;

Далее нам нужно для дочерних элементов или для вложенных элементов этого блока задать порядок сортировки. Чтобы блок с изображением располагался на первом месте, а блок с описанием на втором месте.
Зададим для нашего блока с изображением CSS-свойство order, и укажем здесь значение 1. Для блока description-block нам нужно будет задать CSS-свойство order со значением 2.

<br<br /><br /> <br.image-block { order:1;<br}<br<br.description-block { order: 2;<br}<br<br /><br />

.image—block { .description—block {

После этого наши блоки поменяются местами. Но дело в том, что для конкретного примера нам нужно, чтобы такой порядок расположения блоков у нас был не всегда, а только для маленьких экранов, после перестроения блоков в один столбец.
Для этого нам понадобиться использовать медиазапрос:

<br<br /><br /> <br@media screen and (max-width:780px) {<br<br/**зддесь пишем CSS свойства для перестроения блоков**/<br<br}<br<br /><br />

@media screen and (max—width:780px) { /**зддесь пишем CSS свойства для перестроения блоков**/

В моём примере перестроение происходит на ширине 780 пикселей, у вас это значение может отличаться.
Таким образом, эти CSS-свойства будут срабатывать только для устройств с шириной экрана от 0 до 780 пикселей. На экранах свыше 780 пикселей у нас они работать не будут, и блоки будут отображаться по-прежнему в шахматном порядке.
При помощи CSS-свойств display:flex и order мы можем задавать порядок расположения элементов на сайте причем, как в горизонтальном, так и в вертикальном направлении.