My goal is to have the logo image on the left and the navigation on the right for xs devices, and the logo in the center with navigation on the left for sm devices. However, I am facing an issue where the navigation does not align to the right on xs devices.
The challenge at hand is: How can I align the navigation to the right on xs devices?
<div class="container-fluid border-bottom">
<div class="row d-flex align-items-sm-center">
<div class="col-6 col-sm-2 logo pt-2 pb-2 text-sm-center order-sm-2"> <img src="myimage.png"> </div>
<div class="col-6 col-sm-5 order-sm-1">
<nav class="navbar navbar-expand-lg navbar-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav"> <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a> <a
class="nav-item nav-link" href="#">Azienda</a> <a class="nav-item nav-link" href="#">Prodotti</a> <a class="nav-item nav-link disabled"
href="#">Cataloghi</a> </div>
</div>
</nav>
</div>
<div class="d-none col-sm-block col-sm-5 order-sm-3"> </div>
</div>
</div>