Как переместить средний блок во flex вниз при адаптиве?

Question

[lekseykorolev]

Привет. Возникли трудности с адаптивом, прошу помощи экспертов. Необходимо текстовый блок переместить при адаптиве вниз (пример на картинке). Подскажите как можно это реализовать? Предварительно используются flex элементы (в гриды пока не умею).

<div class=>
<h1>Заголовок 1</h1>
<div>
<h1>Заголовок 1</h1>
<p>Текст</p>
</div>
<h1>Заголовок 3</h1>
</div>

Comments

[Ankhena]

Блочные элементы сами встают в столбик.
Им для этого не нужны ни флекс ни грид.

А вот где вы там нашли 3 заголовка первого уровня, вот это вопрос.
SEOшники вам такого точно не простят )))
На самом деле он там один. А уже внутри можно span. И, наверное, гридом.

[Noder SS]

Залейте код на кодепен

[lekseykorolev]

Ankhena, ну так текст и станет под 2 заголовком. Тогда общая картина просто портится. Я же скриншот прикрепил куда он должен уезжать

[lekseykorolev]

Noder SS, а что изменится если я этот код с вопроса копирую в codepan?

[Ankhena]

lekseykorolev, еще раз: это один заголовок и после него текст.
А уже внутри заголовка выстраивайте его как хотите (гридом удобно).
Да, дизайнер нарисовал тут штуку, которая не выдержит переполнения, но так бывает.
На десктопе флекс или грид и сдвиг параграфа.
На мобилках просто блоки.

Если хотите продолжать держать в коде фигню, то order в помощь.