When working with CSS media queries, I am unsure of whether I should program in a mobile-first style, or a desktop-first style.

For example, let’s say I’m given a design that consists of a set of blocks that are side-by-side. On desktop, I’ll stick to spec, but on mobile, given the reduced screen area, two blocks stacked on top of one another would be better.

Which is better, this (desktop-first):

div {
    width: 50%;
    display: inline-block;
}

@media all and (max-width: 600px) {
    width: 100%;
    margin: 0 auto;
    display: block;
}

or this (mobile first)?

div {
    width: 100%;
    margin: 0 auto;
    display: block;
}

@media all and (min-width: 600px) {
    width: 50%;
    display: inline-block;
}

WordPress’ latest theme follows the mobile-first method, by using min-width, but am I correct in assuming that older browsers without media query support would be unable to parse these directives, and load the “mobile” css?

What are the advantages/disadvantages of both?