Multi-row navbar with BS4 - css

Question

I'm trying to achieve the following layout with a bootstrap 4 navbar:
--Brand---------------------------Partner brand--
--Item1--Item2--Item3--------------------Logout--
I have two problems:
Everything displays on the same line, having the class of "row"
There's no gap, depite using mr-auto on the left hand item list
I have this code:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<div class="row">
<div class="navbar-brand flex-column">
<a href="/">
<span class="my-logo"></span> <span class="nav-name">Brand name</span>
<small class="nav-strap">Catchy strapline</small>
</a>
Partner Name
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
<div class="row">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
logged in as blah
</form>
</div>
</div>
</div>
</nav>
I have experience mostly with BS3 and can't figure out why this isn't working.

Answer 1

**Use following code snippet:**
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container flex-column border">
<div class="row w-100">
<div class="navbar-brand justify-content-between d-flex w-100 m-0">
<a href="/">
<span class="my-logo"></span> <span class="nav-name">Brand name</span>
<small class="nav-strap">Catchy strapline</small>
</a>
Partner Name
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
<div class="row w-100">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
logged in as blah
</form>
</div>
</div>
</div>
</nav>