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

Question

Моя страница разделена на 3 части, как показано на рисунке JFiddle.

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

Проблема:

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

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

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

Другие вопросы, которые я посмотрел на:

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

Move The First Div Appear Under the Second One in CSS - Предлагает ли я использовать абсолютное позиционирование, что я не могу сделать

Answer 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>

display: flex работает только в современных браузерах. Проверьте caniuse.

Тест на моем мобильном телефоне Android показывает, что он работает на Firefox и Chrome, но не на Android-браузере.

Answer 2

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

#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's 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's 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>

Answer 3

Я попытался решить решение, используя 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%); 
    } 
} 

Working Fiddle