Как изменить расположение элементов через CSS, не меняя HTML-разметку?

CSS предоставляет несколько механизмов для изменения визуального расположения элементов без правки HTML-разметки. Это важно, когда HTML генерируется фреймворком, приходит с бэкенда или когда нужно адаптировать один и тот же шаблон под разные экраны.

Основные подходы

• Flexbox — контейнер с display: flex позволяет менять порядок через order, направление через flex-direction, выравнивание через justify-content и align-items.
• CSS Grid — контейнер с display: grid даёт полный контроль через grid-template-areas, grid-column, grid-row.
• Position — position: absolute/relative/fixed/sticky вместе с top/left/right/bottom смещает элемент относительно родителя или окна.
• Float и margin — устаревшие, но всё ещё встречаются: float: left/right, отрицательные margin.
• Transform — translate() визуально сдвигает элемент, не влияя на поток документа.

Пример: перестановка через Flexbox

.container {
  display: flex;
}
.item-a { order: 3; }
.item-b { order: 1; }
.item-c { order: 2; }
/* Визуальный порядок: b, c, a — HTML не менялся */

Пример: перестановка через Grid

.container {
  display: grid;
  grid-template-areas: "sidebar main";
}
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
/* Можно поменять местами, просто изменив grid-template-areas */

Важные нюансы

• Визуальный порядок не совпадает с порядком в DOM — это влияет на доступность (screen readers) и навигацию с клавиатуры.
• order работает только внутри flex/grid-контейнера.
• position: absolute вырывает элемент из потока, что может ломать высоту родителя.

Итог: для современной вёрстки предпочтительны Flexbox и Grid — они дают гибкое управление расположением без правки HTML, но всегда проверяйте доступность и порядок фокуса.