Multi-Row Navbar with Bootstrap 4 with brand-image

Ok, I have found how to create multi row navbars but I'm trying something a little different. Here is what I'm trying to create:

-----------------------------------------------------
address             brand-image                 phone
-----------------------------------------------------
     nav-link | nav-link | nav-link | nav-link
-----------------------------------------------------

which will then become this for mobile devices:

-----------------------------------------------------
brand-image                            navbar-toggler
-----------------------------------------------------

when accessing the navbar-toggler, only the nav-links appear.

Here is what I've tried, coming from a bootstrap 3 solution:

navbar:

.navbar-brand {
    font-size: 200%;
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    margin:0 auto;
}
.navbar-toggle {
    z-index:3;
}

@media (min-width: 768px) {
.navbar-brand,
.navbar-nav li a {
    line-height: 70px;
    height: 70px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 0px;
}
.navbar-nav li {
    line-height: 70px;
    height: 70px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 0px;
    margin-left: 10px;
}
.navbar-brand {
    font-size: 300%;
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    vertical-align: middle;
    margin: auto;
}

.navbar {
    background-color: #ZZZZZ;
}

@media (min-width: 768px) {
  .navbar-nav.navbar-center, .navbar-header-center {
    margin-left: 50%;
    transform: translateX(-50%);
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="navbar-header navbar-header-center">
    <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>
    <a class="navbar-brand" href="#">Brand</a>
  </div>
  <div class="clearfix"></div>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav navbar-center">
      <li class="nav-item"><a class="nav-link" href="#">Link1</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Link1</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Link1</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Link1</a></li>
    </ul>
  </div>
</nav>

https://www.bootply.com/LDZbYHJrc7

Thanks!

You could use 2 navbars with 1 toggler. Put the Brand, Address, Phone in the first navbar, and Links in the 2nd navbar. Then use the toggler from the first and target the 2nd navbar-nav that contains the links. Use the utility class to align items as needed.

<nav class="navbar navbar-expand-md navbar-light bg-light flex-row">
    <span class="navbar-text d-none d-md-block">Address</span>
    <a class="navbar-brand mx-md-auto mr-auto" href="/">
        Brand
    </a>
    <span class="navbar-text d-none d-md-block">Phone</span>
    <button class="navbar-toggler ml-lg-0" type="button" data-toggle="collapse" data-target="#navbarContent">
        <span class="navbar-toggler-icon"></span>
    </button>
</nav>
<nav class="navbar navbar-expand-md navbar-lightp-0">
    <div class="collapse navbar-collapse bg-light px-3" id="navbarContent">
        <ul class="navbar-nav mx-md-auto mx-0 w-50 align-items-start nav-fill">
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

https://www.codeply.com/go/sSfPlgSMCI