Estou precisando fazer uma navbar que recebe duas brands, uma ao lado da outra
<nav class="navbar navbar-light navbar-expand-lg">
<div class="col-md-3 navbar-nav">
<a class="navbar-brand" href="#">
<img src="/assets/img/logo1.png" class="img-fluid">
</a>
</div>
<div class="col-md-3 navbar-nav">
<a class="navbar-brand" href="#">
<img src="/assets/img/logo2.png" class="img-fluid">
</a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#tools" aria-controls="menu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="tools">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link text-dark" href="#"><i class="fas fa-desktop text-center"><br><span class="text-center lead">Monitoramento</span></i></a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#"><i class="far fa-comments text-center"><br><span class="text-center lead">Fórum</span></i></a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#"><i class="far fa-envelope text-center"><br><span class="text-center lead">Contato</span></i></a>
</li>
</ul>
</div>
</nav>
Essas logos não podem ficar muito pequenas, de modo que quando chegar na versão mobile, é preciso ter uma quebra de linha ficando uma logo acima e outra baixo. Como no exemplo abaixo
O problema é que preciso que o botão do toggle fique a direita, no meu código quando quebra pra versão mobile o botão do toggle está decendo pra linha de baixo. Outro problema é que na versão tablet a segunda brand está ficando centralizada, gostaria que ficasse uma do lado da outra.