Bootstrap NavBar Alignment (3 Columns with Responsive Menu) - html

Question

I basically have a pretty simple question, but my portfolio will look better if I can make this simple addition.
I want my NavBar in bootstrap to be in 3 columns, essentially like the image I've mocked up below.
I currently have the base bootstrap navBar setup with the default code like so:
<!-- Navigation -->
<nav class="navbar navbar-expand-lg bg-white fixed-top">
<div class="container">
<a class="nav-link" href="#">my name goes here</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#">about</a></li>
<li class="nav-item"><a class="nav-link" href="#">resume</a></li>
</ul>
</div>
</div>
</nav>
I can make a weird version look right with messing with padding and stuff, but I dont want that. The hardest part for me is understanding the responsive version, and having the one link on the left (work) and two links on the right (about, resume) merge into one dropdown navigation and have the 'my name goes here' become the header above it on mobile.
Any help, or a point in the right direction would be great.
Also, it can be assumed my CSS is the base bootstrap CSS.
Thanks
UPDATE
<!-- Navigation -->
<nav class="navbar navbar-light navbar-expand-md bg-success justify-content-between">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-nav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse dual-nav w-50 order-1 order-md-0">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link pl-0" href="#">work <span class="sr-only">work</span></a>
</li>
</ul>
</div>
Colin Grant
<div class="navbar-collapse collapse dual-nav w-50 order-2">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="">about</a></li>
<li class="nav-item"><a class="nav-link" href="">resume</a></li>
</ul>
</div>
</div>
This seems to work perfectly, any tips for makign it better?
Thanks

Answer 1

Following is how I did it using bootstrap 4. When screen size is <992px right side of the navbar will collapse into a button.
<nav class="navbar navbar-expand-lg navbar-dark bg_color_primary sticky-top d-flex justify-content-between ">
<div class="navbar-nav col-4 align-items-start ">
<div class="text-white bg_color_primary_light rounded-circle p-2">
Work
</div>
</div>
<div class="col-4 d-flex justify-content-center">
<a class="navbar-brand text-white brand_name " href="">
BrandName
</a>
</div>
<button class=" navbar-toggler ml-auto align-items-end" type="button" data-toggle="collapse"
data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse col-4 " id="navbarNavDropdown">
<div class="navbar-nav ml-auto ">
<a class="nav-item nav-link" href="">About</a>
<a class="nav-item nav-link" href="">Resume</a>
</div>
</div>
</nav>