Поменять местами вложенные элементы в CSS

Question

В десктопной версии заголовок должен располагаться слева от картинки, целиком.
Цель - переставить часть заголовка ниже картинки, в мобильной версии.
Найденное решение представлено ниже, но оно кажется каким то костыльным и я не до конца понимаю почему именно оно сработало.
Основной вопрос, почему display:content; у заголовка, позволил вытащить offset на уровень выше, что бы table наконец то заработал.
Второй вопрос, есть ли решение для этой проблемы по проще ?

.container {
  display: flex;
}

@media (max-width: 768px) {
  .container {
    display: table;
  }
  .title {
    display: contents;
  }
  .title__offset-element {
    display: table-footer-group;
  }
}

<div class="container">
  <h2 class="title">
    Lorem ipsum dolor sit amet consectetur
    <span class="title__offset-element">
       Alias dolore excepturi placeat</span>
  </h2>
  <div class="img-container">
    <img src="https://www.gravatar.com/avatar" alt="1" class="img">
  </div>
</div>

Answer 1

Основная суть в display: content - он как бы удаляет из разметки элемент, поднимая на 1 уровень выше содержимое. Благодаря этому в вашем случае и текст и span и контейнер картинки оказываются на 1м уровне, позволяя менять порядок.

Ваше решение не то что бы плохое и костыльное, скорее редкое, чтобы передвинуть текст вниз - вы использовали таблицы и table-footer-group. Более привычное - флексы и изменение порядка order для целевого текста.

.container {
  display: flex;
}

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
  .title {
    display: contents;
  }
  .title__offset-element {
    order: 2
  }
}

<div class="container">
  <h2 class="title">
    Lorem ipsum dolor sit amet consectetur
    <span class="title__offset-element">
       Alias dolore excepturi placeat</span>
  </h2>
  <div class="img-container">
    <img src="https://www.gravatar.com/avatar" alt="1" class="img">
  </div>
</div>

Answer 2

Почитай про Flex-ы и grid-ы

.title {
  display: grid;
  grid-template-columns: auto auto auto;
}

@media (max-width: 768px) {
  body {}
  .title {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "top " "center " "bottom ";
  }
  .title_top {
    grid-area: top;
  }
  .title__offset-element {
    grid-area: bottom;
  }
  .img {
    grid-area: center;
  }
}

<div id="root">
  <h2 class="title">
    <span class="title_top">Lorem ipsum dolor sit amet consectetur</span>
    <span class="title__offset-element">Alias dolore excepturi placeat</span>
    <img src="https://www.gravatar.com/avatar" alt="1" class="img">
  </h2>
</div>

БЛОГ НА HUSL

Поменять местами вложенные элементы в CSS

Ответы (2 шт):