CSS плавает, порядок изменения в макете?

У меня есть обычный макет, который выглядит так:

Этот макет выполняется с помощью поплавков CSS.

Когда я переключаюсь на мобильный, я хочу, чтобы мой макет сделал это:

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

Ответ 1

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

CSS

#sidebar {
    float: left;
    width: 30%;
}

#content {
    float: right;
    width: 70%;
}

.mobile #sidebar,
.mobile #content {
    float: none;
    display: block;
    margin-bottom: 15px;
}

Стандартный HTML:

<body>
<div id="content">
...
</div>
<div id="sidebar">
...
</div>
</body>

Мобильный HTML:

<body class="mobile">
<div id="content">
...
</div>
<div id="sidebar">
...
</div>
</body>

Ответ 2

Предполагая, что:

Два элемента имеют общий родительский элемент
Содержимое div отображается перед боковой панелью в источнике

Вам не нужно менять исходный порядок, вы можете добиться этого с помощью поплавков по умолчанию.

То есть в макете рабочего стола:

#content {
   float: right;
   width: 60%;
}

#sidebar {
   float: left;
   width: 40%;
}

Затем для мобильных устройств (используя мультимедийные запросы или любой другой механизм):

#content, #sidebar {
   float: none;
   clear: both;
 }

Ответ 3

В запросах для мобильных медиа установите float:none.

Ответ 4

На самом деле, я хотел установить макет, как первый макет, поэтому я использовал:

        .iconHome{
            float: left;
            border: 1px solid #73AD21;
            width: 50%;
            height: 100px;
            background-color: aqua;

            /*margin: 50px;*/
        }

    <div class="iconHome1">


    </div>

    <div class="iconHome1">


    </div>

В результате получается вторая компоновка. Поэтому я считаю, что по умолчанию "float: left" не устанавливается на мобильном устройстве. Вы можете использовать выше. Надеемся помочь вам.

Edit:

Я пробовал несколько кодов:

        .iconHome1{
            float: left;
            border: 1px solid #73AD21;
            width: 50%;/*185px*/
            height: 200px;
            background-color: aqua;
            margin: 0;/*0 0 0 -7px*/
            /*clear: left;*/
        }

Это означает, что "ширина" и "margin" будут влиять на макет, хотя вам нужно установить "float: left". Исправить "ширина: 49%", результат:

Ответ 5

Медиа-запрос, контейнер flex и его свойство order должны выполнить трюк:

@media(max-width:767px) {
    .container {
        display: flex;
        flex-wrap: wrap;
    }
    .content {
        order: 1;
    }
    .sidebar {
        order: 2;
    }
}

Обязательно замените значение max-width на свою собственную точку останова мобильной связи.

Поддержка браузера для flex также довольно приличная.