How to sort a responsive navbar - html

Question

I'd like to put my search bar above other buttons like this
But, my responsive navbar looks like this (I use Bootstrap 4)
How could I change their positions?
My HTML code:
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Inicio</a>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Géneros
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Acción</a>
<a class="dropdown-item" href="#">Aventura</a>
<a class="dropdown-item" href="#">Comedia</a>
<a class="dropdown-item" href="#">Familiar</a>
<a class="dropdown-item" href="#">Terror</a>
<a class="dropdown-item" href="#">Romance</a>
<a class="dropdown-item" href="#">Drama</a>
<a class="dropdown-item" href="#">Musical</a>
<a class="dropdown-item" href="#">Fantasia</a>
</div>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Películas
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Estrenos</a>
<a class="dropdown-item" href="#">Ranking</a>
<a class="dropdown-item" href="#">Más vistas</a>
</div>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Series</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Buscar películas" aria-label="Search">
<i class="fas fa-search"></i>
</form>
<ul class="navbar-nav ml auto">
<li class="nav-item active">
<a class="nav-link" href="#">Entrar</a>
</li>
<li class="nav-item active">
<!-- <a class="nav-link" href="#"> -->
<button type="button" class="btn btn-primary">Registro</button>
<!-- </a> -->
</li>
</ul>
</div>
</div>
</nav>
My CSS code:
#media screen and (max-width:768px){
.navbar{
position: fixed;
background: #0c1a4d;
height: 100vh;
width: 50%;
flex-direction: column;
}
}