Какие есть варианты такого позиционирования элементов на странице?

Question

[lagudal]

Имеется страница продукта. Имеется проблема.

В мобильном разрешении нужно переместить ряд элементов, а именно 3 верхних потомка из box2 переместить наверх.

Переместить эти элементы можно куда угодно, за пределы любого контейнера, но нельзя удалять родительские контейнеры. Т.е. обёртку box2 удалять нельзя. Иначе вопрос бы решался очень просто.
В настоящий момент это реализовано след. образом - эти три нужные элемента продублированы, один для десктопа, один для мобил, и display: none для нужного.
Но тут есть свои проблемы, не связанные с позиционированием элементов.
Какие еще есть варианты?

Comments

[I.CaR Soft]

в CSS @media screen and (max-width: XXXpx) - не вариант?
Дублировать элементы как-то глупо.
И элементы лучше спозиционировать, чем скрывать\открывать. (не ломать DOM)

P.S. Если трудности с CCS-позиционированием, то посмотрите в старый-добрый bootstrap, там и свой шаблон\"каркас" думаю найдёте или подобный.

[Александр Васильев]

Window.matchMedia() и переноси что хочешь и куда хочешь

[Ankhena]

Александр Васильев, ну вы придумаете, конечно.

Answer 1

[Ankhena]

Т.е. обёртку box2 удалять нельзя.

В CSS есть display: contents для таких вещей.
Остальное гридами.

Answer 2

[sergski]

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

https://codepen.io/Snowsides/pen/pvojGbE

Answer 3

[Антон Антон]

Гриды это круто!
И tailwind - тоже )) https://play.tailwindcss.com/C7T0WfGfdE

upd: для обхода

Т.е. обёртку box2 удалять нельзя.

есть display:contents https://play.tailwindcss.com/ZwIMd9HqpI