Сделать второй div сначала выше, без абсолютного положения или изменения html

Моя страница разбита на 3 среза, как показано в этом JFiddle.

В моем полном исходном коде у меня есть медиа-запросы, которые помогают управлять размером между мобильным и настольным компьютерами. Когда кто-то обращается к сайту в мобильном режиме, Логотип должен отображаться вверху, а ниже - Элементы. (Я установил display: none на мой снимок div, чтобы скрыть его)

Я не могу изменить расположение divs в HTML, иначе это нарушит мой текущий 3-срезовый макет. Абсолютное позиционирование не является вариантом, так как большая часть моего сайта уже имеет динамический размер, и я бы не хотел, чтобы абсолютное позиционирование мешало разрешению, на котором я не тестировал. Это означает, что вычисление размеров полей также не может быть и речи.

Таким образом, абсолютное позиционирование не допускается и не меняет порядок div. Результат, который я ищу, будет похож на this, исключение без изменения положения div.

Мой вопрос заключается не в медиа-запросах, а в том, как настроить размер для мобильных устройств, используя медиа-запросы. Я только спрашиваю о том, как получить макет, который я хочу, с ограничениями на месте (без абсолютного позиционирования, без расчетных полей, без изменения порядка div).

Переместить div над предыдущим элементом - Первый ответ предполагает перепозиционирование div, чего я не могу сделать. Второй ответ основан на вычислении позиции, которая может мешать другим элементам динамической калибровки.

Ответы

Ответ 1

Flexbox макет - ваш друг здесь. display: flex можно использовать для изменения положения элементов на макете.

#container { display:flex; flex-direction: column; text-align:center;}
#items { order: 2 }
#logo { order: 1 }
#picture { display: none; }

<div id="container">
    <div id="items">Items</div>
    <div id="logo">Logo</div>
    <div id="picture">Picture</div>
</div>

Ответ 2

Я попытался решить решение, используя свойство transform: translateY в процентах.

Примечание. Это работает тогда и только тогда, когда два контейнера имеют одинаковую высоту. или если высота уже известна, вы можете установить значение transform: translateY в соответствии с высотой.

CSS

@media (max-width: 700px) {
    #container > div {
        width: auto;
        display: block;
        float: none;
    }
    #container #picture {
        display: none;
    }
    #logo {
        transform: translateY(-100%);
    }
    #items {
        transform: translateY(100%);
    }
}

Рабочий скрипт

Ответ 3

Наверное, проще всего, если вы играете с минус-полями. Обратите внимание, что размеры ниже (ширина и боковые поля), возможно, необходимо будет отрегулировать в соответствии с вашими конкретными потребностями.

#container * {
    width: 95vw;
    text-align: center;
}

#items {
    width: 50%; /* #picture is hidden so we split the screen into 2 */
    float: left;
    margin-top:30px; /* has to be smaller than the absolute of #logo */
    margin-left:25%; /* half of the element width */
}

#logo {
    width: 50%; /* #picture is hidden so we split the screen into 2 */
    float: right;
    margin-top:-40px; /* its absolute has to be greater than the one of #items */
    margin-right:25%; /* half of the element width */
}

#picture {
    width: 33%;
    float: right;
    display:none; /* Hiding #picture as you said you would */
}

<div id="container">
    <div id="items">Items</div>
    <div id="logo">Logo</div>
    <div id="picture">Picture</div>
</div>