Как поменять элементы местами

Короткий ответ

Во flex- или grid-контейнере порядок задаёт свойство order. По умолчанию у всех 0, меньшее значение стоит раньше:

<style>
  .row { display: flex; gap: 8px; }
  .row div { padding: 8px 16px; background: lavender; }
  .row .first { order: -1; background: gold; }
</style>
 
<div class="row">
  <div>One</div>
  <div>Two</div>
  <div class="first">Three</div>
</div>

Развернуть весь ряд

flex-direction: row-reverse или column-reverse выстраивает все элементы в обратном порядке:

<div style="display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 8px;">
  <span>1</span><span>2</span><span>3</span>
</div>

Разный порядок на разных экранах

Чаще всего порядок меняют в медиазапросе: на компьютере картинка справа от текста, а на телефоне — над ним:

<style>
  .media { display: flex; gap: 12px; }
  @media (max-width: 500px) { .media { flex-direction: column; } .media img { order: -1; } }
</style>
 
<div class="media">
  <p>Text about our flower shop.</p>
  <img src="/media/photo-200x200.jpg" alt="A flower" width="100" height="100">
</div>

В сетке то же самое удобно делать через grid-template-areas — меняется только схема областей.

Частая ошибка

Через order переставляют важные элементы — кнопки, ссылки, поля формы. Глаз видит новый порядок, а клавиша Tab и скринридер идут по порядку в HTML: фокус начинает прыгать по странице. Если порядок важен по смыслу, меняйте его в самом HTML.