I need help aligning my brand and the links on opposite sides (brand on left, other links on the right) for mobile view. The issue I'm facing is that the links on the right end up moving to the next line. Any suggestions or advice would be greatly appreciated. My website is built using Bootstrap 5. Below is a snippet of the code:
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/your-css-file.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<nav class="nav-navbar navbar-expand-lg navbar-light">
<div class="col border border-danger">
<div class="d-sm-flex p-2 bd-highlight">
<button
class="navbar-toggler align-items-sm-start"
type="button"
data-bs-toggle="collapse"
data-bs-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 name</a>
<div class="d-flex flex-sm-row-reverse">
<div class="p-2 bd-highlight">Search</div>
<div class="p-2 bd-highlight">cart</div>
<div class="p-2 bd-highlight">Login</div>
<div class="p-2 bd-highlight">Sign up</div>
</div>
</div>
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav flex-column">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#"
>NEW ITEMS</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="#">BRANDS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CURATED PIECES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">TOP ITEMS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">FEATURED</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</body>
</html>