mobile first etc

[Grahamhoare]

Probably not so much a problem as advice, if I put a style in style.scss ie .social-media {float: none}, but then as the site expands I want it to be floated right so I put a style into the relevant media query bracket.
But it doesn't work as the initial specificity overrides the later media query, as it is the last rule to be applied (the media queries are imported at the top). So I have make the media query style more specific by adding div.social-media. This is a pain, shouldn't they be switched around somehow so that when the media queries are hit, if the style has the same specificity, then the media query will work, not the mobile first style?
I might be missing something,any tips appreciated, used this theme for a good 30 sites now :-)

Graham Hoare