swap div position and margin-top dropdown menu - html

Question

first question, how to swap two divs, i want the image on the left and the text next to it
https://codepen.io/madaffakiren/pen/PomedWx
2nd question, I want to lower the "dropdown" but when I do it with margin-top then the "dropdown" disappears on hover, how to assign this blind spot (https://i.imgur.com/8mpN8BL.png) to dropdown?
HTML:
<!-- ======== Navbar ======= -->
<nav class="navbar sticky-top navbar-expand-lg navbar-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="/"><img src="img/logo4.svg" width="120px" height="32px" alt="logo"></a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link " href="/" data-target=".navbar-collapse.show">XXX</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown"
data-target=".navbar-collapse.show">Sample</a>
<ul class="dropdown-menu">
<a class="dropdown-item" href="#">Sample</a>
<a class="dropdown-item" href="#">Sample</a>
</ul>
</li>
</li>
<li class="nav-item">
<a class="nav-link " href="#" data-target=".navbar-collapse.show">XXX</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-target=".navbar-collapse.show">XXX</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-target=".navbar-collapse.show">XXX</a>
</li>
</ul>
</div>
</div>
</nav>
CSS:
.navbar {
padding: 10px 0;
background-color: #37517e;
}
.navbar .nav-item {
margin: 0;
padding: 0;
}
.navbar .nav-item .nav-link {
font-size: 15px;
font-weight: 500;
color: #ffffff;
padding: 0;
margin-left: 35px;
transition: all 0.3s ease-in-out;
}
.navbar .nav-item .nav-link:hover {
transform: translateY(-3px);
color: #03b0d5;
}
.navbar .nav-item .dropdown-menu {
border: none;
margin: 20px 0;
background-color: blue;
}
.navbar .nav-item:hover .dropdown-menu {
display: block;
}