Не могу настроить сетку Bootstrap 5. Где ошибка?

Question

[pixal]

Всем привет. Мне нужен nav с таким содержанием

На десктопе элементы должны распологаться так.
1 ряд. Три колонки и ряд 1 ряд на всю ширину. Как на картинке


И на мобильном 4 ряда и все на всю ширину



Но почему-то на десктопе все в один ряд получаются.

Код: https://codepen.io/tgnbhcgz-the-decoder/pen/abgOrGj

Помогите пожалуйста разобраться и понять в чем проблема.

Comments

[Владислав Лысков]

ну сделай так
<div class="container-fluid flex-column">

[Алексей Голягин]

или удали класс navbar

Answer 1

[Сергей delphinpro]

Зачем привязка к бутстрапу, если на css вам хватит двух-трех строк кода для описания желаемого?

мобильники - вообще ничего не делаете. Блоки и так уже идут в столбик.

Дальше простой запрос

@media (min-width: 768px) /* ширина по вашему хотению */ {
  .block {  
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .yellow {
    grid-column: span 3;
  }
}