How to move third element in block down with flexbox? - html

Question

How move third element down, that first block with logo, and second other full width contain another panel,and down will be another panel?
this block (pastenow.ru/57IX6) need to move and it must be like this : pastenow.ru/57IXE
<nav class="navbar">
<!--start of top_panel-->
<div class="logo"><img src="img/logo.png" alt=""> </div>
<div class="panel">
<div class="nav_title">С нами ловят все!</div>
<div class="phone">8 800 553535</div>
<div class="address_wrapper">
<div class="address">Павлодар, ул. Мира 7</div>
<div class="address">Павлодар, ул. Мира 8</div>
</div>
<div class="call_btn def_btn">Заказать звонок</div>
</div>
<!--end of top_panel-->
<!--start of bottom_panel-->
<div class="bottom_panel">
<div class="main">Главная</div>
<div class="about_us">компании</div>
<div class="tournament">Турниры</div>
<div class="goods">Товары</div>
<div class="news">Новости</div>
<div class="photo">Фото</div>
<div class="video">Видео</div>
<div class="contact">Контакты</div>
<div class="social_icons_wrapper">
<div ><i class="fa fa-youtube icon_size" aria-hidden="true"></i></div>
<div ><i class="fa fa-instagram icon_size" aria-hidden="true"></i></div>
<div ><i class="fa fa-vk icon_size" aria-hidden="true"></i></div>
<div ><i class="fa fa-whatsapp icon_size" aria-hidden="true"></i></div>
<div><i class="fa fa-telegram icon_size" aria-hidden="true"></i></div>
</div>
</div>
<!--end of bottom_panel-->
if add flex-wrap: wrap; so all goes down, but i need only one.
css
.container{
width: 1170px;
height: auto;
min-height: 100vh;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: auto;
font-family: "Museo Cyrl 900";
}
.header_line{
width: 100%;
height: 122px;
background-color: #fff;
}
.navbar{
width: 100%;
display: inline-flex;
justify-content: space-between;
}
.logo{
width: 200px;
height: auto;
}
.panel{
width: 100%;
display: inline-flex;
justify-content: space-between;
}
.bootom_panel{
width: 100%;
display:inline-flex;
justify-content: flex-end;
}

Answer 1

I have made a codepen demo with slight adjustments in the layout which you have provided. Please click on this link: https://codepen.io/ArunK_UI/pen/qwbXLm?editors=1100
Major change here is I have wrapped upper panel and lower panel in one wrapper and then gave them respective properties.
<div class="panel-wrap">
<div class="panel"></div>
<div class="bottom_panel"></div>
</div>