Привет! Перемещение блоков при медиа-запросах обычно происходит из-за неправильного использования CSS-свойств, таких как `flex`, `grid`, а также из-за специфики порядка располагения элементов в разметке HTML.
Чтобы решить проблему с изменением местами логотипа и иконок, а также с тем, что разделитель смещается в низ блока, рекомендую проверить следующие моменты:
1. **Flexbox/Grid**: Если вы используете `flex`, убедитесь, что у вас правильно установлены свойства `order` и `flex-direction`. При `flex-direction: column` элементы располагаются вертикально, и порядок может быть изменен с помощью свойства `order`.
Пример:
```css
@media (max-width: 510px) {
.container {
display: flex;
flex-direction: column;
}
.logo {
order: 1; /* Порядок отображения */
}
.icons {
order: 2;
}
.divider {
order: 3;
}
}
```
2. **Проверка позиционирования**: Убедитесь, что у вас не используются свойства, которые могут влиять на позиционирование элементов, такие как `absolute` или `relative`, без должного контроля над их расположением.
3. **Свойства высоты и ширины**: Если у вас есть ограничения по высоте или ширине на какие-то элементы, проверьте, не вызывают ли они смещение. Используйте относительные единицы (например, `em`, `%`) вместо абсолютных (например, `px`), если это возможно, чтобы избежать проблем с адаптивностью.
4. **Проверка отображения**: Убедитесь, что вы не используете `display: none` для скрытия элементов, если это не требуется. Это может привести к путанице с порядком отображения.
5. **Инструменты разработчика**: Используйте инструменты разработчика (например, в Chrome) для отладки стилей на элементах и наблюдайте за тем, как они меняются при изменении размеров окна.
Если после проверки всех этих моментов проблема все еще сохраняется, вы можете предоставить пример вашего HTML и CSS кода, чтобы мы смогли более точно понять ситуацию и помочь вам с решением.