Как охватить столбец двумя строками в Bootstrap 4

Question

Хотя этот вопрос задавался много раньше, все ответы предполагают, что для охвата столбца поместите остальные столбцы во внутреннюю строку, например так:

<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>

Результат будет выглядеть примерно такрабочий стол:

И на мобильном телефоне это будет выглядеть так:

Однако требуемый результат будетразместить логотип между двумя навигационными устройствами, как показано ниже:

На данный момент моя лучшая ставка - два размещать два логотипа, а затем скрывать и показывать их в разных размерах области просмотра.Который работает, но на самом деле не изящное решение.

Answer 1

Использование собственного макета сетки мое первое предложение.(Или, может быть, у bootstrap есть несколько ярлыков, но я их не знаю) Вы можете играть с order-X классами начальной загрузки.Но это не поможет вам получить логотип div, между nav div в другой оболочке

.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>