Переопределяющий медиа-запрос CSS по умолчанию.

Я получаю это от подключаемого модуля Chrome ADB, подключаясь к моему телефону через USB. В принципе, я могу проверять элементы на моем Chrome и просматривать или изменять их на моем подключенном ПК.

Я получаю эту странную проблему. Я думал, что медиа-запросы должны были отменять общие правила класса, но если вы видите этот образ, вы можете увидеть, что правила медиа-запросов переопределяются. Я могу исправить это, добавив !important, но я бы предпочел, я также понимаю, что правило для контейнера h1, не связанного с мультимедиа, объявляется ПОСЛЕ правила СМИ. Я не уверен, что именно поэтому, или есть другая причина. Может ли кто-нибудь объяснить, почему это происходит?

Код CSS:

@media screen and (max-device-width: 767px) {
  .container > h1 {
    font-size: 40px;
    line-height: 40px; }
    ...some more rules... }
.container > h1 {
    margin: 0;
    font-size: 80px;
    font-weight: 300;
    line-height: 80px; }

EDIT - Добавлен пример

Смотрите это: http://jsfiddle.net/djuKS/ Обратите внимание, что если вы замените порядок правил, поведение будет таким, как ожидалось. Но по умолчанию запрос на мультимедиа переопределяется