swap div position and margin-top dropdown menu

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;
}