У меня есть меню. Блок 1 прижат к левому краю, блоки 5 и 6 прижаты к правому краю. Блоки 2,3,4 по середине.
Вот разметка:
<header>
<nav>
<div>
<a id="home" href="/1">1</a>
</div>
<div>
<a class="active" href="/2">2</a>
<a class="active" href="/3">3</a>
<a class="active" href="/4">4</a>
</div>
<div>
<a class="active" href="/5">5</a>
<a class="active" href="/6">6</a>
</div>
</nav>
</header>
Вот моя разметка:
nav {
flex: 1;
flex-direction: row;
justify-content: space-between;
align-items: center;
user-select: none;
div > a {
align-items: center;
margin: 0 10px;
}
a {
font-weight: 600;
font-size: rem(16);
text-transform: uppercase;
padding: 10px;
color: $blueSemi;
cursor: default;
}
}
Для мибильной версии сайта я хочу блоки 2,3,4 опустить ниже. Как показано на картинке.
Как это можно сделать?