Расположение блока в зависимости от ширины экрана

Question

Есть ряд блоков:

<div id='1'><div>Контент</div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id='2'></div>

Есть ли на css вариант сделать так, чтобы блок с контентом при изменении ширины экрана, например менее 480px, был не в id='1', а в id='2'

Или всё же нужно два одинаковых делать и скрывать/показывать через медеа в зависимости от ширины?

Answer 1

Напрямую, в голых стилях и DOM не получится. Стиль описывает только параметры, привязанные к элементам документа и как они могут меняться. Иерархия остается прежней.

Нужна поддержка модулей вроде Flexbox или CSSGrid. тогда в CSS можно описать параметры flex-контейнеров, изменяемые в зависимости от среды (ключевые слова для поиска Flexbox CSS media query for layout change).

Если есть поддержка скриптов, это можно сделать в JavaScript с помощью запросов к документу, document.getElementById и document.appendChild в обработчике:

 <div id='1'><div id="Moving">Контент</div></div>
 <div id='2'></div>

 <script>
    function moveDiv() {
        const movableDiv = document.getElementById('Moving');
        if (window.innerWidth <= 480) {
            document.getElementById('2').appendChild(movableDiv); 
        } else {
            document.getElementById('1').appendChild(movableDiv); 
        }
    }

    window.addEventListener('load', moveDiv);
    window.addEventListener('resize', move);
 </script>

(код писан на коленке в блокнотике и м.б. неверным)

PS. Если напрячься, с помощью CSS можно указать скрипту что и куда в документе переставлять, но это будут серьезные затраты на разработку и поддержку. Как минимум, раньше видел такое в веб страничке "Кинопоиска".

БЛОГ НА HUSL

Расположение блока в зависимости от ширины экрана

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