User icon moves with the menu in a Bootstrap 5 navigation bar

Question:

I'm using Bootstrap 5 to create a sticky navigation bar at the top of a Django project. When the navigation menu expands on smaller screens (via the toggle button), the user icon (fa-user) moves along with the menu. My goal is for the user icon to stay fixed on the right side, while only the navigation menu should expand and collapse.

Here is the navigation bar code:

<nav class="navbar navbar-transparent fixed-top navbar-expand-lg">
    <div class="container-fluid d-flex justify-content-arround">
        <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>
        <a class="navbar-brand" href="#">
            <img class="imagotipe" src="{% static 'img/imagotipe-white-02.svg' %}"
                 alt="imagotipe">
        </a>
        <div class="collapse navbar-collapse text-center" id="navbarNavAltMarkup">
            <div class="navbar-nav">
                <a class="nav-link active" aria-current="page" href="#">Home</a>
                <a class="nav-link" href="#">Me</a>
                <a class="nav-link" href="#">About</a>
                <a class="nav-link" href="#">Contact</a>
            </div>
        </div>
        <div>
            <a href="#">
                <i class="fa-solid fa-user"></i>
            </a>
        </div>
    </div>
</nav>

Problem:

The user icon (fa-user) moves with the menu when it opens or closes on smaller screens. I want the icon to stay fixed on the right side of the navigation bar, while only the navigation menu should expand and collapse. How can I make the user icon stay fixed on the right without moving when the menu expands or collapses?

Solution

In bootstrap 5, you can use css class order-lg-[order] to define the order of specific flex items for lg screen size. The docs here

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css" integrity="sha512-5Hs3dF2AEPkpNAR7UiOHba+lRSJNeM2ECkwxUIxC1Q/FLycGTbNapWXB4tP889k5T5Ju8fs4b1P5z/iB4nMfSQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  </head>
  <body>
    <nav class="navbar navbar-transparent fixed-top navbar-expand-lg">
        <div class="container-fluid d-flex">
            <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>
            <a class="navbar-brand" href="#">
                <img class="imagotipe" height="50px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/640px-Google_2015_logo.svg.png"
                    alt="imagotipe">
            </a>
            <div class="d-flex order-lg-3">
                <a href="#">
                    <i class="fa-solid fa-user"></i>
                </a>
            </div>
            <div class="collapse navbar-collapse order-lg-2" id="navbarNavAltMarkup">
                <div class="navbar-nav">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                    <a class="nav-link" href="#">Me</a>
                    <a class="nav-link" href="#">About</a>
                    <a class="nav-link" href="#">Contact</a>
                </div>
            </div>
        </div>
    </nav>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  </body>
</html>