Есть код:
.menu {
width: 90%;
height: 100px;
background-color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 5%;
padding-right: 5%;
}
.menu__category li {
display: inline;
padding: 20px;
}
.menu__category a {
padding-bottom: 36px;
transition: all 0.2s ease;
color: black;
}
.menu__category a:hover {
border-bottom: 6px solid #ec4e4e;
color: #ec4e4e;
}
.menu__social i {
padding: 10px;
transition: color 0.2s ease;
}
.menu__social i:hover {
color: #ec4e4e;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="menu">
<div class="menu__logo">
<img src="img/logo.png" alt="logo">
</div>
<div class="menu__category">
<ul>
<li>
<a href="#">Главная</a>
</li>
<li>
<a href="#">Новинки</a>
</li>
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#">Link</a>
</li>
</ul>
</div>
<div class="menu__social">
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
</div>
</div>
Хочу сделать так, чтобы при уменьшени экрана (на планшете, допустим) логотип и ссылки были в один ряд, а меню переносилось на следующий. Не знаю как реализовать. Заранее спасибо за помощь.