My website has a navigation bar with two logos - one in the left corner (the coat of arms) and one in the right corner (the scout lily), along with text links in between. The coat of arms uses the "navbar-brand" class.
To see how it looks, click here: https://i.sstatic.net/nO7LN.png
On mobile screens, the layout appears like this:
https://i.sstatic.net/Dtt8T.png
https://i.sstatic.net/GldhJ.png
In the collapsed view, everything is as desired, but I want the lily to be hidden in the expanded view, like so:
https://i.sstatic.net/odpkY.png
I have tried adjusting the classes and IDs, but haven't made any progress yet. How can I achieve this?
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fd9f9292898e898f9c8dbdc8d3ced3cf">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-danger fs-5">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="https://via.placeholder.com/50" alt="Gau Franken" height="100" width="82"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto mb-2 mb-md-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">
<h4>Selbstdarstellung</h4>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="gruppen.html">
<h4>Gruppen</h4>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="links.html">
<h4>Links</h4>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="kontakt.html">
<h4>Kontakt</h4>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="impressum.html">
<h4>Impressum & Datenschutz</h4>
</a>
</li>
</ul>
<div>
<img src="https://via.placeholder.com/50" alt="Pfadfinderlilie" height="100" width="82">
</div>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2c4e4343585f585e4d5c6c19021f021e">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>