Mi problema es el siguiente (screenshot)
Quiero que el formulario de búsqueda aparezca al lado del botón del navbar. en diseño web aparece bien, el problema es cuando lo abro desde el móvil adjunto código:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid p-0">
<nav class="navbar navbar-expand-lg navbar-light bg-white" id="MenuNav">
<!-- BOTON DEL NAVBAR -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!------------------------------>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ">
<!-- CONTENIDO DEL NAV -->
</ul>
</div>
<!-- FORM DE BUSQUEDA -->
<div class="navbar-nav">
<form class="form-inline my-2 my-lg-0">
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Ej: SmarTv" aria-describedby="button-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary " type="button" id="button-addon2">Buscar</button>
</div>
</div>
</form>
</div>
<!------------------------>
</nav>
</div>
</body>
</html>
Espero que me puedan ayudar