How to leave search bar out of the collapsed navbar bootstrap 5 - html

Question

I want my navbar to be the exact layout I have now, but when the navbar is collapsed I want the searchbar between the logo and toggle button, is there anyway to keep the remaining layout but still put the search bar between?
<nav class="navbar navbar-expand-lg" style="background-color: #121212">
<div class="container-fluid">
<a class="navbar-brand" href="#">Narton</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Albums</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Artists</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Discover</a>
</li>
</ul>
<form class="d-flex w-100 p-2" role="search">
<input
type="text"
class="form-control"
placeholder="Search"
aria-label="Search"
aria-describedby="basic-addon1"
/>
</form>
<button type="button" class="btn btn-outline-secondary py-2">Login</button>
<ul class="navbar-nav sm-icons">
<a class="nav-link" href="https://twitter.com/"><i class="bi bi-twitter"></i></a>
<a class="nav-link" href="#"><i class="bi bi-instagram"></i></a>
<a class="nav-link" href="#"><i class="bi bi-tiktok"></i></a>
<a class="nav-link" href="#"><i class="bi bi-facebook"></i></a>
</ul>
</div>
</div>
</nav>
this is the html code for my navbar
css code for my Navbar (I only put in what I thought was necessary)
.sm-icons {
flex-direction: row;
}
.sm-icons .nav-link{
padding-right: 1em;
}