Navbar items alingment for bootstrap 5 - html

Question

I am sticking to this problem for such a long time. Please help me to fix it... I really tried various ways but none of them is actually working.
I want my login button at the end of my navbar(right side) and when I decrease the screen size i wanted it to be appear on the left side of the burgger menu
Here is my code -
<header class="header">
<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="image/logo.png" alt="" width="150px" height="35px">
</a>
<div class="login-nav ms-auto mb-2 me-2 ">
<ul class="navbar-nav login">
<li class="navbar-item login-item">
<a class="nav-link active" aria-current="page" href="#">Login</a>
</li>
</ul>
</div>
<button class="navbar-toggler" 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>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 ">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
I want them like these pictures :
enter image description here
enter image description here

Answer 1

This is a workaround. There are two login links.
<header class="header">
<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="image/logo.png" alt="" width="150px" height="35px">
</a>
<div class="mb-2 me-2 d-block d-md-none">
<ul class="navbar-nav login">
<li class="navbar-item login-item">
<a class="nav-link active" aria-current="page" href="#">Login</a>
</li>
</ul>
</div>
<button class="navbar-toggler" 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>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 ">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<div class="mb-2 me-2 d-none d-md-block">
<ul class="navbar-nav login">
<li class="navbar-item login-item">
<a class="nav-link active" aria-current="page" href="#">Login</a>
</li>
</ul>
</div>
</div>
</nav>
</header>

Answer 2

<header class="header">
<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="image/logo.png" alt="" width="150px" height="35px">
</a>
<div class="navbar-nav ms-auto me-2 d-block d-md-none">
<ul class="navbar-nav">
<li class="nav-item ">
<a class="nav-link active" aria-current="page" href="#">Login</a>
</li>
</ul>
</div>
<button class="navbar-toggler" 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>
<div class="collapse navbar-collapse justify-content-between" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 ">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<div class="navbar-nav ms-auto me-2 d-none d-md-block">
<ul class="navbar-nav">
<li class="nav-item ">
<a class="nav-link active" aria-current="page" href="#">Login</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
This is working as expected :) This for the idea Yasin