Самое простое:
jsfiddle

Контейнеру задаете flex-wrap: wrap;
Первому блоку задаете ширину в 100%, второму и третьему в 50%.

Потом, если надо будет в мобильной версии сделать второй и третий блок по ширине контейнера, просто измените ширину с 50% на 100%, и все три будут друг под другом.

Если кому интересно, решила все таким образом (это весь скрипт на работающее меню):

$(window).bind('resize', function(){ 
    if ($(window).width() < 450) {
        $('.main-nav').css('display','none');
        $('body').append('<div class="overlay-3"></div>');
        $('.main-nav').addClass('fadeout'); 
        $('.overlay-3').addClass('fadeout');
        
    $('.mobile-nav-btn').on('click', function() {
        if ($('.main-nav').css("display") == "none") {
            $('.overlay-3').fadeIn(200);
            $('.main-nav').fadeIn(200);
        }    
    });
    
    $(('a.nav-link')).on('click touch', function() { 
        $('.overlay-3, .fadeout').fadeOut(); 
    }); 
    
    $('body').on('click', '.overlay-3', function(event) {
    event.preventDefault();
    $('.overlay-3, .main-nav').fadeOut(200);
    });  
} 
else { 
    if ($(window).width() > 450) { 
        $('.main-nav').css('display','block'); 
        $('.main-nav').removeClass('fadeout'); 
        $('.overlay-3').removeClass('fadeout');
        $('.overlay-3').remove();
        }
    }
}).trigger('resize');

Только тут объединила все, что связано с мобильным меню в условие только для разрешений < 450px.

В < 450 $('.main-nav').css('display','none') в начале добавлен для того, чтобы меню не оставалось открытым, если пользователь вдруг повернул экран и в уже не мобильном меню перешел по ссылке (при повороте у меня открывается декстопная версия сайта).

В > 450 $('.main-nav').css('display','block') аналогично добавлен, чтобы меню не исчезало, если до этого было закрыто через оверлей.

В общем, не знаю, насколько все грамотно или правильно сделано, но главное, работает. :-)

P.S. за подсказку с добавлением класса fadeout и .trigger('resize') спасибо Антону. :-)