Раздел заголовка css для адаптивного веб-дизайна на ipad, рабочий стол, телефон

Question

Пытался найти решение для RWD для заголовка раздела, используя boostrap, но не работает для ipad и телефона. Я хочу показать lo go и меню и навигационную корзину для отзывчивых. Как добиться решения.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<nav class="navbar navbar-dark bg-dark mb-5">
  <a class="navbar-brand" href="#" routerLink='/products'><img width="50" height="50" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcROSGhNugPi-wkkvEePwHNppt8AaZRlUk-y9yEapagLNUaXxy_G" class="logo mr-2" /></a>
  <div class="navbar-expand mr-auto">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" routerLink='/home'>Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink='/service'>Service</a>
      </li>

      <li class="nav-item">
        <a class="nav-link" routerLink='/about'>About</a>
      </li>

      <li class="nav-item">
        <a class="nav-link" routerLink='/contact'>Contact</a>
      </li>

      <li class="nav-item">
        <a class="nav-link" routerLink='/test1'>test1</a>
      </li>

      <li class="nav-item">
        <a class="nav-link" routerLink='/test2'>test2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink='/test3'>test3</a>
      </li>

      <li class="nav-item">
        <a class="nav-link" routerLink='/test4'>test4</a>
      </li>

    </ul>
  </div>
  <div class="navbar-expand ml-auto navbar-nav">
    <div class="navbar-nav">
      <a class="nav-item nav-link" href="https://github.com/beeman" target="_blank">
        <i class="fa fa-github"></i>
      </a>
      <a class="nav-item nav-link" href="https://twitter.com/beeman_nl" target="_blank">
        <i class="fa fa-twitter"></i>
      </a>
      <a class="nav-item nav-link" href="https://medium.com/@beeman" target="_blank">
        <i class="fa fa-medium"></i>
      </a>
    </div>
  </div>
</nav>

Демо: https://stackblitz.com/edit/tutorial-angular-cli-v6-styling-bootstrap-ywyjmv?file=src / app / ui / header / header.component. html