Bootstrap 4 collapse external div into navbar - html

Question

I have a div containing 3 dropdowns which sit under the navbar on a normal desktop window. Additionally, I have a couple of links which are right-justified in the navbar. On a page break, I'd like for the dropdown div to collapse into the the navbar along with the right-justified links.
Here's what I have so far:
<nav class="navbar navbar-default navbar-expand-lg fixed-top navbar-dark bg-dark" role="navigation" id="topnav">
<div class="container-fluid" id="nav_content">
<a class="navbar-brand" href="#">Brand</a>
<div class="navbar-header">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navredirect,#dropdowns" aria-controls="navredirect" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div id="navredirect" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid" id="content">
<div class="row mx-auto justify-content-center" id="dropdowns">
<!-- NOTE: dropdowns are auto-populated with a jQuery script -->
<label>Name:</label>
<select id="name"></select>
<label>State:</label>
<select id="state"></select>
<label>Item:</label>
<select id="item"></select>
</div>
</div>
Right now the redirect links in the navbar are being collapsed properly, but the dropdowns (which I assign as one of the data-targets in the collapse button) are not responding to the page break. Does Bootstrap let you move an external element into the navbar like this?
I'll figure out the eventual styling of the dropdown elements once I get them into the nav. For now I just need to get them up there and I can't figure out how for the life of me. Any ideas?