Где ошибка в css? - Joomla 3.x: Общие вопросы

Здравствуйте уважаемые форумчане. Возникла проблема.

Нужно чтобы модули отображались над материалом в мобильной выдаче.

https://sovety.mobi/kulinarnye-sovety/kak-bystro-svarit-sveklu.html

Прописываю в CSS данный код:
@media handheld, only screen and (max-width: 960px) {
div#mp_right {
display: flex;
flex-direction: column;
}
div#content_sparky {
order: 2;
}
}

Но почему-то не срабатывает. Подскажите пожалуйста в чем может быть ошибка?

Не работает, потому что к mp_right применять бесполезно (кстати и тут ошибка, нужно писать просто .mp_right ), т.к. это будет действовать только внутри него, поэтому нужно применять на уровень выше, в данном случае к sparky_container.

Проверил ваш код, тоже что-то не то, полоска в мобильной версии просто появилась

Ой, сорри, все работает. Спасибо Вам большое! Не внимателен я.

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

Пробовал вот этот код, не помогло.

  @media handheld, only screen and (max-width: 960px) {
.content_sparky {
display: flex;
flex-direction: column;
}
.sparky_container {
order: 2;
}
}

Сработал вот этот код:


  @media handheld, only screen and (max-width: 960px) {
.sparky_container {
display: flex;
flex-direction: column-reverse;
}
.content_sparky {
order: 2;
}
}


Но почему-то поиск сдвинулся в самый вверх и верстка стала стремновато, в чем может быть проблема?


https://ibb.co/mTWhcFR

Вроде так должно быть?

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

Спасибо Вам.