Навбар помещает текст под значком на маленьком устройстве

Question

У меня есть моя навигационная панель, которая содержит значки с текстом ниже. Я внес в него изменения, чтобы не было сбоев, когда вы go на мобильном телефоне. Проблема в том, что когда мы в этом случае, то текст и значки остаются выровненными. Я хотел бы сохранить одинаковую форму (значок выше и текст ниже) независимо от носителя.

Я не очень хорош в CSS, я попробовал для себя с devtools посмотреть, смогу ли я найти элемент позволяя мне исправить это, но я не нашел ничего подобного

Это мой код:

HTML

<nav class="navbar navbar-icon-top navbar-expand-lg navbar-dark bg-dark justify-content-end">
    <ul class="navbar-nav menu-right">
        <div class="child child-right">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="notifications" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i class="fa fa-bell">
                        <span class="badge badge-primary">1</span>
                    </i>
                    Notifications
                </a>
                <div class="dropdown-menu notifications" aria-labelledby="notifications">
                </div>
            </li>

            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="messagerie" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i class="fa fa-envelope-o">
                        <span class="badge badge-warning">11</span>
                    </i>
                    Messages
                </a>
                <div class="dropdown-menu messages" aria-labelledby="messagerie">
                </div>
            </li>
        </div>
    </ul>
</nav>

CSS:

@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");

.navbar-icon-top .navbar-nav .nav-link > .fa {
  position: relative;
  width: 36px;
  font-size: 24px;
}

.navbar-icon-top .navbar-nav .nav-link > .fa > .badge {
  font-size: 0.75rem;
  position: absolute;
  right: 0;
  font-family: sans-serif;
}

.navbar-icon-top .navbar-nav .nav-link > .fa {
  top: 3px;
  line-height: 12px;
}

.navbar-icon-top .navbar-nav .nav-link > .fa > .badge {
  top: -10px;
}

@media (min-width: 576px) {
  .navbar-icon-top.navbar-expand-sm .navbar-nav .nav-link {
    text-align: center;
    display: table-cell;
    height: 70px;
    vertical-align: middle;
    padding-top: 0;
    padding-bottom: 0;
  }

  .navbar-icon-top.navbar-expand-sm .navbar-nav .nav-link > .fa {
    display: block;
    width: 48px;
    margin: 2px auto 4px auto;
    top: 0;
    line-height: 24px;
  }

  .navbar-icon-top.navbar-expand-sm .navbar-nav .nav-link > .fa > .badge {
    top: -7px;
  }
}

@media (min-width: 768px) {
  .navbar-icon-top.navbar-expand-md .navbar-nav .nav-link {
    text-align: center;
    display: table-cell;
    height: 70px;
    vertical-align: middle;
    padding-top: 0;
    padding-bottom: 0;
  }

  .navbar-icon-top.navbar-expand-md .navbar-nav .nav-link > .fa {
    display: block;
    width: 48px;
    margin: 2px auto 4px auto;
    top: 0;
    line-height: 24px;
  }

  .navbar-icon-top.navbar-expand-md .navbar-nav .nav-link > .fa > .badge {
    top: -7px;
  }
}

@media (min-width: 992px) {
  .navbar-icon-top.navbar-expand-lg .navbar-nav .nav-link {
    text-align: center;
    display: table-cell;
    height: 70px;
    vertical-align: middle;
    padding-top: 0;
    padding-bottom: 0;
  }

  .navbar-icon-top.navbar-expand-lg .navbar-nav .nav-link > .fa {
    display: block;
    width: 48px;
    margin: 2px auto 4px auto;
    top: 0;
    line-height: 24px;
  }

  .navbar-icon-top.navbar-expand-lg .navbar-nav .nav-link > .fa > .badge {
    top: -7px;
  }
}

@media (min-width: 1200px) {
  .navbar-icon-top.navbar-expand-xl .navbar-nav .nav-link {
    text-align: center;
    display: table-cell;
    height: 70px;
    vertical-align: middle;
    padding-top: 0;
    padding-bottom: 0;
  }

  .navbar-icon-top.navbar-expand-xl .navbar-nav .nav-link > .fa {
    display: block;
    width: 48px;
    margin: 2px auto 4px auto;
    top: 0;
    line-height: 24px;
  }

  .navbar-icon-top.navbar-expand-xl .navbar-nav .nav-link > .fa > .badge {
    top: -7px;
  }
}


.child {
  display: flex;
  flex-flow: row nowrap;
  flex-grow: 0;
  justify-content: flex-start;
  align-items: center;
  max-height: 100%;
}

.child.child-right {
  flex-grow: 1;
  justify-content: flex-end;
}

.child > li {
  position: relative;
  max-height: 100%;
}

И JSFiddle: https://jsfiddle.net/kiuega/06r2jh85/5/

Попробуйте уменьшить предварительный просмотр до изменения разрешения, чтобы увидеть, что происходит, когда вы находитесь на мобильном телефоне