Как сделать чтобы логотип перескакивал на другую строку отделяясь от панели навигации?

[SnowDi]

У меня слева логотип, справа на одной линии стоит навигационная панель.
Логотип и панель навигации обёрнуты в header.

<header>
            <div class="Logo">
        <h1>
        RaymontionDEG
        
        </h1>
                </div>
        <nav>
        
    <a class="nav_link" href="#"> Главная</a>
    <a class="nav_link" href="#"> О нас </a>
    <a class="nav_link" href="#">  Партнёры</a>
    <a class="nav_link" href="#">  Контакты </a>
           </nav>
    </header>

Я применил к header'y display: flex, с двумя целями во первых при большом экране
лого уйдёт влево, а панель меню в право( у меня так и вышло):

display: flex;
    justify-content: space-between;
    align-items: center;

И второй момент, я думал что при маленьком экране логотип останется на одной строке, а меню переместится на другую строку.
Но! Всё работает совсем не так.. логотип остаётся на месте, а менюшки сбиваются в кучу справа, при этом оставаясь на "одной строке с логотипом!!!!

Я плохо понимаю флекс..
Какое свойство тут надо применить, чтобы при маленьком экране, логотип оставался на своей строке,
А навигационное меню переходило на другую строку?!
Или тут надо поступить как то по другому?!

 

[BaNru]

Надо использовать flex-wrap: wrap;