I have a search bar on my navigation bar, but I am looking to move it to the next line within a maximum width if the screen display is extra small (xs) or for mobile devices.
Below is the code snippet:
<nav class="navbar navbar-expand-md fixed-top-sm justify-content-start flex-nowrap bg-dark navbar-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar2">
<span class="navbar-toggler-icon"></span>
</button>
<a href="/" class="navbar-brand px-2">Top</a> <!-- brand -->
<ul class="navbar-nav flex-row mx-auto">
<li class="nav-item active">
<a class="nav-link px-2 d-none d-sm-block" href="#">Link</a> <!-- Item 1 -->
</li>
<li class="nav-item col-sm-12">
<a class="nav-link px-2" href="#">Link</a> <!-- Item 2 -->
</li>
</ul>
<div class="col-xs-3 col-sm-6 col-md-6 col-lg-6 mx-auto">
<div class="input-group-prepend">
<input id='urlurl' type="url" class="form-control" placeholder="Search" pattern="https?://.+" required />
<span class="input-group-btn">
<button class="btn btn-primary" style="background-color: #0275D8; border-color: #0275D8;" type="button" >Test</button>
</span>
</div></div></nav>