How to span a column two rows in Bootstrap 4 - css

Question

Though this question has been asked a lot before, all answers suggestion that to span a column, place the other columns into an inner row, like so:
<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>
The result would look like so on a desktop:
And, on mobile it would look like this:
However, the required result would be to place the logo between the two navigation, like below:
My best bet so far, is two place two logos, then hide and show them at different viewport sizes. Which works, but isn't really a neat solution.

Answer 1

Using custom grid layout is my first suggestion. (Or maybe bootstrap has some shortcuts to that, but I don't know of them) You can play with order-X classes of bootstrap. But that will not help you to get logo div, in between nav divs in different wrapper
.special {
display: grid;
}
div {border: 1px solid grey;}
/* for tablets and desktops*/
#media screen and (min-width: 600px) {
.special {
grid-template-columns: 1fr 2fr;
grid-template-rows: 50px 50px;
}
.logo {grid-area: 1/1/3/2;}
}
<div class="special">
<div class="topNav">top nav</div>
<div class="logo">logo</div>
<div class="bottomNav">bottom nav</div>
</div>