медийната заявка не работи на устройства

Посочвате ли viewport в html . Ще ви трябва това, за да могат стиловете да се рендират.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Можете да прочетете за това тук: https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag

Изглежда в този момент кодът, който споменавате, не е там на място и има скритата оста y. Ако изобщо я има, тогава има само 1. Трябва да имате повече медийни заявки за по-малки ширини. Вижте моя сайт на blogspot (неговият персонализиран домейн, така че няма .blogspot), той има много медийни заявки за много по-малки ширини различни ширини.

Задайте max-width и max-height за различни елементи в медийни заявки за по-малки ширини и със сигурност трябва да видите, че работи.

Само съвет: За да тествате, трябва да не отваряте уебсайта си в android/ios, просто преоразмерете прозореца на работния плот или това сайт.

Ако използвате iPhone, различен от оригиналния, ширината е 640px. И повечето телефони с Android в наши дни са там, ако не и повече. Така че вашата max-width: 600px заявка е твърде тясна, за да се приложи към някой от тези телефони.

Можете да коригирате това, като увеличите параметъра max-width, за да изключите настолни компютри, докато включвате телефони. Като вземете ширината на Twitter Bootstrap за мобилни устройства, трябва да опитате max-width: 767px.