How can I position my dropdown menu to the right in mobile? - html

Question

I'm creating a responsive website using Bootstrap 4. In desktop, things look good. However, in mobile, my logo stays in the center and the menu stays in the left. Here's my codepen.
This is what I need to achieve:
This is what I'm getting:
I am using this code according to Bootstrap's documentation.
This is my Navbar's code:
<nav class="navbar navbar-expand-lg nl-navbar navbar-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarTogglerDemo02">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="service-main-landing.html">
<img src="images/logo-header.svg" alt="Logo Reebit" class="col-lg-7 col-md-4
col-sm-7 col-7"/>
</a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link mr-3" href="#">Contactar un profesional</a>
</li>
<li class="nav-item active">
<a class="nav-link mr-4" href="#">Registrarme</a>
</li>
<li class="nav-item active">
<a class="nav-link mr-4" href="#">Iniciar sesión</a>
</li>
<button class="btn my-2 my-sm-0 nl-btn-nav-secondary" type="button" data-
toggle="modal" data-target="#registrationModal"
id="landingRegistrationNavBtn">Publicar servicio</button>
</ul>
</div>
</nav>

Answer 1

Switch your navbar-toggler position with navbar-brand.
<a class="navbar-brand" href="#">
<img src="https://via.placeholder.com/150" class="col-lg-7 col-md-4 col-sm-7 col-7">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02">
<span class="navbar-toggler-icon"></span>
</button>
Additional: Seems like you misunderstood Bootstrap's grid system. col should be direct child of row like this:
<div class="row">
<div class="col">
</div>
<div class="col">
</div>
</div>