Есть разница между респонсив и адаптивностью -
habrahabr.ru/post/148224/.
По хорошему же веб-разработка примерно с момента выпуска третьей версии бутстрапа стала отходить от оптимизации сайта под ряд устройств, опираясь на популярные значения ширины: 420, 768 и так далее, потому что сайт должен смотреться хорошо даже если взять, вывести его на телевизионную панель и медленно уменьшать окно браузера до 320 пикселей в ширину. Мораль в чем: примерно это при тестировании и делается, окно браузера постепенно уменьшаем или наоборот идем от малого к великому, если используем mobile-first подход и везде, где картинка "рушится" ставим breakpoint с помощью media-queries. А вот чтобы не писать кучу значений и иметь возможность ими гибко управлять - очень подойдет препроцессинг, где можно выносить переменную breakpointа, что очень упрощает кодинг хорошей адаптивности.
А еще я не очень поняла как вы пишете медиа запросы - неужели просто
@media (width: 600px)?
В любом же случае прописывается диапазон типа:
@media (min-width: 480px) and (max-width:567px) и тогда совсем уж месива быть, мягко говоря, не должно для устройств, лежащих в этом диапазоне ширины экрана. Возможно, это именно то, что хоть как-то исправит ваше "месиво".
