Bootstrap 4: Split Navbar and display in two navba

I have created a navbar using bootstrap 4. This navbar has 10 'nav-items'. For big screens it is displayed in-line and for small screen I have used 'navbar-toggler'. This works fine. But I want to split this navbar and show in 2 navbar-toggler for small screens.

Is it possible? Also I am new to bootstrap!!

Below is the code:

<nav class="navbar navbar-expand-md my-navbar">
<!-- Brand -->
<a class="navbar-brand"></a>    
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
</button>   
<!--Navbar Links -->
<div class="collapse navbar-collapse justify-content-center" id="collapsibleNavbar">
    <ul class="navbar-nav">

        <li class="nav-item">
            <a class="nav-link animated zoomIn" href="#">Link 1</a>
        </li>
        <li class="nav-item">
            <a class="nav-link animated zoomIn" href="#">Link 2</a>
        </li>
        <li class="nav-item">
            <a class="nav-link animated zoomIn" href="#">Link A</a>
        </li>
        <li class="nav-item">
            <a class="nav-link animated zoomIn" href="#">Link B</a>
        </li>
    </ul>
</div>
</nav>

For small devices, I want Link 1 and link 2 to be collapsed under toggler-1 and Link A and Link B to be collapsed toggler-2

Is this perhaps what you had in mind?

<nav class="navbar navbar-expand-md my-navbar">
<!-- Brand -->
<a class="navbar-brand"></a>    
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar1">
    <span class="navbar-toggler-icon"></span>
</button>   
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar2">
    <span class="navbar-toggler-icon"></span>
</button>   
<!--Navbar Links -->
<div class="collapse navbar-collapse justify-content-center" id="collapsibleNavbar1">
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link animated zoomIn" href="#">Link 1</a>
        </li>
        <li class="nav-item">
            <a class="nav-link animated zoomIn" href="#">Link 2</a>
        </li>
    </ul>
</div>
<div class="collapse navbar-collapse justify-content-center" id="collapsibleNavbar2">
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link animated zoomIn" href="#">Link A</a>
        </li>
        <li class="nav-item">
            <a class="nav-link animated zoomIn" href="#">Link B</a>
        </li>
    </ul>
</div>
</nav>

We now have two collapsible nav bars #collapsibleNavbar1 and #collapsibleNavbar2 with two togglers to drive each of them. What I found was the 1st toggle button ends up in the middle of the menu bar but this would probably be stylable.