Добавьте гибкий div к герою и инвертируйте положение при изменении размера ⇐ CSS

[Гость]

Как сказано в заголовке, чего я пытаюсь достичь (только 2 разрешения, 767 пикселей мин/макс)

• больше 767 пикселей, 2 стороны деления рядом. Один с текстом слева, другой с изображением справа.
  
  Текст имеет фиксированное положение (шрифт меняется при изменении размера), изображение перемещается вместе с изменить размер
• Изображение может располагаться позади текста, следовательно, с меньшим z-индексом

[*]меньше или 767 пикселей, используйте готовые функции загрузчика и разместите их друг над другом

• но инвертировано (изображение в первой строке , текст через секунду), без перекрытия
  

Я могу достичь либо одного, либо другого... никогда и того и другого. Иметь текстовый элемент div с абсолютной позицией, а изображение — гибким с помощью преобразования: TranslateX(50%) был моим лучшим подходом, но он кажется неправильным.
Я собираюсь упростить код для лучше читать.

Код: Выделить всё

@media (max-width: 767px) {
.flex-md-row-reverse {
flex-direction: column-reverse !important;
}
.order-md-1 {
order: 2;
}
.order-md-2 {
order: 1;
}
}

Код: Выделить всё

MY TEXT

[img]https://placehold.co/200x200[/img]

Подробнее здесь: https://stackoverflow.com/questions/781 ... -on-resize