Как располжить блок в сайте по коду выше, а визуально на сайте ниже через JS?

Question

[Oleg]

Привет всем,
наткнулся на интересное решение от магазина розетка , суть в том, что они текстовый блок, который отвечает за сео оптимизацию расположили по коду выше, а визуально он располагается возле футера, они это сделали через position abosolute (пример страницы сайта).
так же скриншоты примера


Можете подсказать как организовать аналогичное решение через JS, т.к через position absolute в моем случае не удастся реализовать, т.к снизу будут идти еще блоки.

Answer 1

[Eugene Chefranov]

Сделайте через flex и order
https://webref.ru/css/flex
https://webref.ru/css/order

Comments

[Oleg]

привет, с флексами знаком незначительно, пытался вникнуть в статьи, но все равно не догоняю, чтобы реализовать эту идею (блок в коде html выше, а визуально сам блок на сайте ниже), нужно все блоки сайта под один общий контейнер поместить?

[Eugene Chefranov]

Oleg, cтруктура должна быть такая:

Answer 2

[Антон]

Да просто создайте пустой div в нужном месте и посредством jquery заберите все содержимое блока, в котором у вас располагается сео текст и переместите его в подготовленный
https://jsfiddle.net/gow1rzve/

Comments

[Oleg]

проверил, текст полностью из кода переносится ниже, в другой блок
скриншот prntscr.com/mw692x

[Антон]

Oleg, Эм, это хорошо или плохо? Не совсем понял из "посыла"

[Oleg]

работает но не так, у розетки как раз таки по коду текст отображается выше, а визуально он находится ниже блока, в данном случае получается, что полностью переносим текст ниже и по коду и визуально.

Возможно есть мысль, что нужно допилить, чтобы текст по коду оставался на том же месте, а визуально он был ниже?)

[Антон]

Oleg, Ааа, тогда вам стоит воспользоваться советом Eugene Chefranov , поменять блоки на флекс и в css сменить порядок следования