Default CSS overriding media query

Question

I\'m getting this from Chrome ADB plugin, connecting to my phone via USB. Basically allowing me to inspect elements on my android chrome and view or alter them on my connect

Answer 1

I thought media queries were to overrule generic class rules,

Rules inside a MQ are rules like any other one in terms of priority of their selector, except they will only apply depending on the conditions of the at-media.

(...) I also realize that the rule for non-media-queried container h1 is declared AFTER the media query rule.

You found the correct reason: both rules have exactly the same priority (specificity) as they have the exact same selector. If a property is part of both rules (and the declaration is valid and both of them or none of them has !important modifier), then the value of the last declaration written will apply.
That's the reason you'll always find MQ written at the end (except rules applying to IE8- via conditional classes, no possible overlap between MQ and modern browsers and IE8- :) )