Как поменять местами элементы таким образом? Такое возможно без js?

Да, вы можете поменять местами элементы в HTML без использования JavaScript, с помощью CSS. Для этого существует свойство CSS "order".

Свойство "order" определяет порядок, в котором элементы отображаются в гибком контейнере. По умолчанию значение "order" равно 0 для всех элементов.

Чтобы поменять местами элементы, нужно задать каждому элементу различное значение "order". Элементы с более низким значением "order" будут отображаться раньше, чем элементы с более высоким значением "order".

Вот пример HTML-разметки для двух элементов, которые нужно поменять местами:

<div class="container">
  <div class="element1">Первый элемент</div>
  <div class="element2">Второй элемент</div>
</div>

А вот CSS-код, который поменяет их местами:

.container {
  display: flex;
}

.element1 {
  order: 2;
}

.element2 {
  order: 1;
}

В этом примере, элементы "element1" и "element2" являются дочерними элементами контейнера "container". Мы устанавливаем для элемента "element1" значение "order" равное 2, а для элемента "element2" - 1. Это приведет к тому, что элемент "element2" будет отображаться перед элементом "element1".

Обратите внимание, что для использования этого подхода нужно, чтобы контейнер был гибким (например, используя свойство "display: flex" или "display: grid").

Таким образом, с помощью CSS свойства "order" вы можете поменять местами элементы в HTML, даже без использования JavaScript. Это предоставляет возможность более гибкого и простого управления порядком отображения элементов на странице.