How to make links in the menu stack on top of each other in the middle on the mobile version on bootstrap?

Question

css

<div class="container">
<nav class="navbar bg-dark navbar-dark">

  <a class="navbar-brand" href="#">Cake Awesome</a>


  
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">8 999 555 55 55</a>
      </li>

    </ul>
 
</nav>
</div>

There is such a code, it is necessary that in the mobile version the logo (text) and the number are stacked on top of each other and aligned in the middle, I wanted to implement this using the row and col-sm class, but I suspect that pushing these tags into the nav tag is not the best idea, is there a simple solution? The burger menu is not an option. It turns out that everything looks good on the monitors, the logo and the phone are around the edges, but on the mobile phone it’s not very good.

Answer 1

Here it is rather necessary to make the flex be a column on a mobile phone, and a line on a desktop.

flex-direction: row;
flex-direction: column;