Как сделать, чтобы ссылки в меню складывались друг на друга по середине на мобильной версии на bootstrap?

Question

[Оливия Самохвалова]

<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>

Есть такой код, нужно чтобы в мобильной версии логотип (текст) и номер складывались друг на друга и выравнивались по середине, я хотела реализовать это с помощью класса row и col-sm, но подозреваю, что пихать эти теги в тег nav не самая хорошая идея, может есть простое решение? Меню бургер не вариант. Получается на мониторах все выглядит хорошо, лого и телефон по краям, а вот на мобилке не оч.

Answer 1

[inFureal]

Тут скорее надо сделать, чтобы на мобилке флекс был колонкой, а на десктопе строкой.

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

Comments

[Оливия Самохвалова]

Точно, не догадалась) Благодарю вас.