Как сделать чтобы в мобильной версии элементы расположились под логотипом сайта?

Для того чтобы элементы на сайте располагались под логотипом в мобильной версии, можно использовать CSS-свойство "flexbox" или "grid".

Вариант с "flexbox":

1. Создайте контейнер, в котором будут располагаться логотип и элементы. Назовем его, например, "header-container".

.header-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

2. Определите стили для логотипа.

.logo {
  /* стили логотипа */
}

3. Определите стили для элементов, которые должны располагаться под логотипом.

.menu {
  /* стили элементов */
}

4. В медиа-запросе, который будет активироваться для мобильной версии, установите ширину и высоту логотипа, а также максимальную ширину для контейнера, чтобы элементы в нем не выходили за границы экрана. Также, может потребоваться добавить дополнительные стили, чтобы контент внутри контейнера лучше адаптировался для мобильных устройств.

@media (max-width: 767px) {
  .logo {
    width: 200px;
    height: 100px;
  }
  
  .header-container {
    max-width: 100%;
    padding: 20px;
  }
}

Вариант с "grid":

1. Создайте контейнер, в котором будут располагаться логотип и элементы. Назовем его, например, "header-container".

.header-container {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}

2. Определите стили для логотипа.

.logo {
  /* стили логотипа */
}

3. Определите стили для элементов, которые должны располагаться под логотипом.

.menu {
  /* стили элементов */
}

@media (max-width: 767px) {
  .logo {
    width: 200px;
    height: 100px;
  }
  
  .header-container {
    max-width: 100%;
    padding: 20px;
  }
}

Оба подхода гибкие и можно настраивать различные аспекты в зависимости от конкретных требований дизайна и структуры сайта.