Как переместить третий элемент в блоке с помощью flexbox?

Question

Как переместить третий элемент вниз, чтобы этот первый блок с логотипом, а второй другой на всю ширину содержал еще одну панель, а вниз - другая панель?этот блок (pastenow.ru/57IX6) нужно переместить и он должен быть таким: 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 ><a href="#" target="_blank"><i class="fa fa-youtube icon_size" aria-hidden="true"></i></a></div>
        <div ><a href="#" target="_blank"><i class="fa fa-instagram icon_size" aria-hidden="true"></i></a></div>
        <div ><a href="#" target="_blank"><i class="fa fa-vk icon_size" aria-hidden="true"></i></a></div>
        <div ><a href="#" target="_blank"><i class="fa fa-whatsapp icon_size" aria-hidden="true"></i></a></div>
        <div><a href="#" target="_blank"><i class="fa fa-telegram icon_size" aria-hidden="true"></i></a></div>
    </div>
</div>
<!--end of bottom_panel-->

если добавить flex-wrap: wrap;так что все идет вниз, но мне нужен только один.

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

Я сделал демонстрационный пример с небольшими изменениями в макете, который вы предоставили. Пожалуйста, нажмите на эту ссылку: https://codepen.io/ArunK_UI/pen/qwbXLm?editors=1100

Основное изменение здесь - я обернул верхнюю панель и нижнюю панель в одну обертку, а затем дал им соответствующие свойства.

<div class="panel-wrap">
  <div class="panel"></div>
  <div class="bottom_panel"></div>
</div>