Barre de boutons problématique avec bootstrap 4.4

Bonjour,
J'ai fait le "menu" suivant par ordre alphabétique qui fonctionne très bien sur PC mais sur téléphone la barre sort de l'écran.

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group btn-group-lg mr-2" role="group" aria-label="First group" style="width:100%">
        <a href="javascript:visibilite('A');" class="btn btn-secondary btn-lg" role="button">A</a>
        <a href="javascript:visibilite('B');" class="btn btn-secondary btn-lg" role="button">B</a>
        <a href="javascript:visibilite('C');" class="btn btn-secondary btn-lg" role="button">C</a>
        <a href="javascript:visibilite('D');" class="btn btn-secondary btn-lg" role="button">D</a>
        <a href="javascript:visibilite('E');" class="btn btn-secondary btn-lg" role="button">E</a>
        <a href="javascript:visibilite('F');" class="btn btn-secondary btn-lg" role="button">F</a>
        <a href="javascript:visibilite('G');" class="btn btn-secondary btn-lg" role="button">G</a>
        <a href="javascript:visibilite('H');" class="btn btn-secondary btn-lg" role="button">H</a>
        <a href="javascript:visibilite('I');" class="btn btn-secondary btn-lg" role="button">I</a>
        <a href="javascript:visibilite('J');" class="btn btn-secondary btn-lg" role="button">J</a>
        <a href="javascript:visibilite('K');" class="btn btn-secondary btn-lg" role="button">K</a>
        <a href="javascript:visibilite('L');" class="btn btn-secondary btn-lg" role="button">L</a>
        <a href="javascript:visibilite('M');" class="btn btn-secondary btn-lg" role="button">M</a>
        <a href="javascript:visibilite('N');" class="btn btn-secondary btn-lg" role="button">N</a>
        <a href="javascript:visibilite('O');" class="btn btn-secondary btn-lg" role="button">O</a>
        <a href="javascript:visibilite('P');" class="btn btn-secondary btn-lg" role="button">P</a>
        <a href="javascript:visibilite('Q');" class="btn btn-secondary btn-lg" role="button">Q</a>
        <a href="javascript:visibilite('R');" class="btn btn-secondary btn-lg" role="button">R</a>
        <a href="javascript:visibilite('S');" class="btn btn-secondary btn-lg" role="button">S</a>
        <a href="javascript:visibilite('T');" class="btn btn-secondary btn-lg" role="button">T</a>
        <a href="javascript:visibilite('U');" class="btn btn-secondary btn-lg" role="button">U</a>
        <a href="javascript:visibilite('V');" class="btn btn-secondary btn-lg" role="button">V</a>
        <a href="javascript:visibilite('W');" class="btn btn-secondary btn-lg" role="button">W</a>
        <a href="javascript:visibilite('X');" class="btn btn-secondary btn-lg" role="button">X</a>
        <a href="javascript:visibilite('Y');" class="btn btn-secondary btn-lg" role="button">Y</a>
        <a href="javascript:visibilite('Z');" class="btn btn-secondary btn-lg" role="button">Z</a>
    </div>
</div>

Je pense que le problème vient de mon style="width:100%" mais j'en ai besoin aussi de lui donc je sèche.

Dans l'idéal sur téléphone il faudrait que ça se mette à la ligne dès que la largeur de l'écran est atteinte, sans changer le 100% pour la version PC mais je vois pas comment faire.

Si quelqu'un pouvait éclairer ma lanterne, ça serait cool