Although this question has been asked numerous times before, the common suggestion is to span a column by placing the other columns into an inner row. Here's an example:
<div class="row">
<div class="col-12 col-md-4">logo</div>
<div class="col-12 col-md-8">
<div class="row">
<div class="col-12">top nav</div>
<div class="col-12">bottom nav</div>
</div>
</div>
</div>
On desktop, it would appear like this: https://i.sstatic.net/JirKO.jpg
On mobile devices, it would look like this: https://i.sstatic.net/L30BB.jpg
However, the desired outcome is to position the logo between the two navigation elements, as shown below: https://i.sstatic.net/oBpfm.jpg
One possible solution attempted so far involves using two logos and toggling their visibility based on viewport size changes. While functional, it may not be the most elegant solution.