Navbar not Hidden on Mobile Screen

Question

I cannot get the navbar to hide when screen size goes mobile can anyone see what I've done wrong please. I'm using bootstrap 4.

<!-- NAVBAR -->

<div class="container-fluid">
  <nav class="mynavbar navbar navbar-expand-lg navbar-light">
    <a class="mynav" href="index.html">Bristol Plumber 24-7<small>Heating and Plumbing Expert</small></a>
    <a class="icon mr-auto" href="tel:+447415375875"><i class="fas fa-mobile-alt"></i></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup">
                <span class="navbar-toggler-icon"></span>
            </button>
    <div class="d-flex flex-row-reverse collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav ">
        <a class="nav-item nav-link" href="heating.html">heating</a>
        <a class="nav-item nav-link" href="plumbing.html">plumbing</a>
        <a class="nav-item nav-link" href="drainage.html">Drainage</a>
        <a class="nav-item nav-link" href="contactus.html">Contact us</a>
      </div>
    </div>
  </nav>
</div>

<!-- NAVBAR END -->

How can I move this to the right of NavBar using bootstrap 4

<div class="collapse navbar-collapse justify" id="navbarNavAltMarkup">
  <div class="navbar-nav ">
    <a class="nav-item nav-link" href="#">Home</a>
    <a class="nav-item nav-link" href="#">Features</a>
    <a class="nav-item nav-link" href="#">Pricing</a>
    <a class="nav-item nav-link" href="#">Disabled</a>
  </div>
</div>

<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
  <div class="navbar-nav ">
    <a class="nav-item nav-link" href="#">Home</a>
    <a class="nav-item nav-link" href="#">Features</a>
    <a class="nav-item nav-link" href="#">Pricing</a>
    <a class="nav-item nav-link" href="#">Disabled</a>
  </div>
</div>

Answer 1

The d-flex (display:flex) is overriding the navbar-collapse class which is making the mobile nav always show.

<div class="container-fluid">
    <nav class="mynavbar navbar navbar-expand-lg navbar-light">
        <a class="mynav" href="index.html">Bristol Plumber 24-7<small>Heating and Plumbing Expert</small></a>
        <a class="icon mr-auto" href="tel:+447415375875"><i class="fas fa-mobile-alt"></i></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="flex-row-reverse collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav ">
                <a class="nav-item nav-link" href="heating.html">heating</a>
                <a class="nav-item nav-link" href="plumbing.html">plumbing</a>
                <a class="nav-item nav-link" href="drainage.html">Drainage</a>
                <a class="nav-item nav-link" href="contactus.html">Contact us</a>
            </div>
        </div>
    </nav>
</div>

https://www.codeply.com/go/AyvXEUmPJH

Aligning Navbar items to the right has already been answered before

Just use ml-auto (left auto-margin) to the push the navbar-nav to the right:

<div class="container-fluid">
    <nav class="mynavbar navbar navbar-expand-lg navbar-light">
        <a class="mynav" href="index.html">Bristol Plumber 24-7<small>Heating and Plumbing Expert</small></a>
        <a class="icon mr-auto" href="tel:+447415375875"><i class="fas fa-mobile-alt"></i></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav ml-auto">
                <a class="nav-item nav-link" href="heating.html">heating</a>
                <a class="nav-item nav-link" href="plumbing.html">plumbing</a>
                <a class="nav-item nav-link" href="drainage.html">Drainage</a>
                <a class="nav-item nav-link" href="contactus.html">Contact us</a>
            </div>
        </div>
    </nav>
</div>