Solução alternativa sem o flex-direction para o map

Muito show, de fato o display flex veio para salvar nossas vidas :)

Queria saber se seria correto eu alterar o meu HTML? Para não usar o flex-direction, tendo em vista que ele tem algumas limitações quando se trata dos navegadores suportá-lo.

Eu pensei na seguinte solução: Criando uma div para cada tema (backend, frontend...) e então colocando o display flex no pai deles e fazendo as devidas modificações nos links.

Seria bom, alterar o html? Dessa maneira? Pensei em como fazer sem alterar, mas não cheguei a uma solução cabível e simples.

HTML

    <nav class="rodapePrincipal-navMap-list">
        <div class="box-list">
            <h4 class="navmap-list-title navmap-list-title-backend">Linguagens Backend</h4>
            <a class="rodapePrincipal-navMap-link" href="#">Java</a>
            <a class="rodapePrincipal-navMap-link" href="#">PHP</a>
            <a class="rodapePrincipal-navMap-link" href="#">Pascal</a>
            <a class="rodapePrincipal-navMap-link" href="#">Scala</a>
            <a class="rodapePrincipal-navMap-link" href="#">Python</a>
            <a class="rodapePrincipal-navMap-link" href="#">Java Web</a>
            <a class="rodapePrincipal-navMap-link" href="#">Assembly</a>
            <a class="rodapePrincipal-navMap-link" href="#">Lógica de programação</a>
        </div>
        <div class="box-list">
            <h4 class="navmap-list-title navmap-list-title-frontend">Linguagens Frontend</h4>
            <a class="rodapePrincipal-navMap-link" href="#">Flexbox</a>
            <a class="rodapePrincipal-navMap-link" href="#">Desenvolvimento Web</a>
            <a class="rodapePrincipal-navMap-link" href="#">Javascript</a>
            <a class="rodapePrincipal-navMap-link" href="#">AngularJS</a>
            <a class="rodapePrincipal-navMap-link" href="#">ReactJS</a>
            <a class="rodapePrincipal-navMap-link" href="#">Polymer</a>
        </div>
        <div class="box-list">
            <h4 class="navmap-list-title navmap-list-title-framework">Frameworks</h4>
            <a class="rodapePrincipal-navMap-link" href="#">Ruby on Rails</a>
            <a class="rodapePrincipal-navMap-link" href="#">VRaptor</a>
            <a class="rodapePrincipal-navMap-link" href="#">SpringMVC</a>
            <a class="rodapePrincipal-navMap-link" href="#">NodeJS</a>
            <a class="rodapePrincipal-navMap-link" href="#">Django</a>
            <a class="rodapePrincipal-navMap-link" href="#">Bootstrap3</a>
        </div>
        <div class="box-list">
            <h4 class="navmap-list-title navmap-list-title-bancoDeDados">Banco de dados</h4>
            <a class="rodapePrincipal-navMap-link" href="#">MySQL</a>
            <a class="rodapePrincipal-navMap-link" href="#">MariaDB</a>
            <a class="rodapePrincipal-navMap-link" href="#">Postegres</a>
        </div> 
    </nav>

CSS

    .rodapePrincipal-navMap-list {
            display: flex;
            justify-content: space-around;
    } 
    .rodapePrincipal-navMap-link {
            display: block;
    }