Quebrar (WRAP) submenu na vertical

Estou tentando fazer um submenu usando o flex, eu consegui fazer ele mas não da forma que eu preciso. Com wrap e direction row.

Categoria 01     Categoria02     Categoria03
Categoria 04     Categoria05     Categoria06
Categoria 07     Categoria08     Categoria09

Preciso fazer ele na vertical e não na horizontal por causa da ordem de exibição dos menus.

Categoria 01     Categoria04     Categoria07
Categoria 02     Categoria05     Categoria08
Categoria 03     Categoria06     Categoria09

Está é a forma que montei o HTML

<nav>
    <ul>
        <li class="logo"> <a href="/" title="" target="_self"> <img src="/img/logo-cabecalho.png" alt="Logotipo Pinta de Giraffa" class="responsivo" /></a> </li>
        <li>
            <a href="catalogo" title="" target="_self">Meninas</a>
            <ul class="submenu">
                <li> <a href="catalogo" title="" target="_self">Categoria 01</a> </li>
                <li> <a href="catalogo" title="" target="_self">Categoria 02</a> </li>
                <li> <a href="catalogo" title="" target="_self">Categoria 03</a> </li>
                <li> <a href="catalogo" title="" target="_self">Categoria 04</a> </li>
                <li> <a href="catalogo" title="" target="_self">Categoria 05</a> </li>
                <li> <a href="catalogo" title="" target="_self">Categoria 06</a> </li>
                <li> <a href="catalogo" title="" target="_self">Categoria 07</a> </li>
            </ul>
        </li>
        <li> <a href="catalogo" title="" target="_self">Meninos</a> </li>
        <li> <a href="campanhas" title="" target="_self">Campanhas</a> </li>
        <li> <a href="blog" title="" target="_self">Blog</a> </li>
        <li> <a href="sobre" title="" target="_self">A Pinta</a> </li>
        <li> <a href="contato" title="" target="_self">Contato</a> </li>
    </ul>
</nav>