Как вариант, можно скомбинировать флоаты и флексы и написать семантический код, используя специальные теги для этого (header
, main
, section
, aside
, footer
).
В примере ниже, изначально ориентируемся на мобильные телефоны, поэтому по умолчанию ширину всех блоков оставляем нетронутой.
Затем, от 768px
до 1024px
мы применяем float
к элементам внутри main
(не забываем предотвратить выпадание дочерних блоков из main
).
От 1025px
и далее мы применяем к тегу main
флекс свойства и для дочерних элементов используем свойством order
, для того, чтобы управлять их порядком расположения.
P.S.: высота указана лишь для примера.
P.P.S.: footer
поставлен для того, чтобы показать, что дочерние элементы из main
не выпадают.
Можете также посмотреть реализованный мною пример на codepen
header, footer, .content, .right-aside, .left-aside {
background-color: lightblue;
padding: 15px;
margin: 5px;
}
@media screen and (min-width: 768px) {
main::after {
content: "";
display: table;
clear: both;
}
.content {
width: calc(60% - 40px);
height: 540px;
float: left;
}
.left-aside,
.right-aside {
width: calc(40% - 40px);
height: 250px;
float: right;
}
}
@media screen and (min-width: 1025px) {
main {
display: flex;
flex: 1 2 100%;
}
.content {
order: 1;
flex: 3;
}
.left-aside,
.right-aside {
height: 540px;
flex: 1;
}
.left-aside {
order: 0;
}
.right-aside {
order: 2;
}
}
<header>Шапка</header>
<main>
<section class="content">Контент</section>
<aside class="left-aside">Левый сайдбар</aside>
<aside class="right-aside">Правый сайдбар</aside>
</main>
<footer>Подвал</footer>