Wrong image style applied when two media query "breakpoints" are matched.

This is a hard problem to explain, but I'll try to be as thorough and clear as I can. If you need more information or clarification just ask.

I have a field that uses Picture to format it's display. I defined a group of "breakpoints" or media queries for the field which included these two:

(max-width: 480px)
(max-width: 767px)

In CSS these two media queries work so that at a screen size of 480px or less, both are matched but the 480px query's styles override those of the 767px query's. In picturefill.js, however, 767px is used and 480px is ignored entirely. This is because of the following code:

        // See which sources match.
        for (var j = 0, jl = sources.length; j < jl; j++ ) {
          var media = sources[j].getAttribute('data-media');

          // If there's no media specified or the media query matches, add it.
          if (!media || (w.matchMedia && w.matchMedia(media).matches)) {
            matches.push(sources[j]);
          }
        }

        if (matches.length) {
          // Grab the most appropriate (last) match.
          var match = matches.pop();

The "for" loop is taking each of the source span elements with matching media queries and putting them in an array. Because the span containing the 767px query comes after the span containing the 480px query in the markup, it does the same in the array. Then inside the "if" statement the match is selected by taking the last item in the array. Here's where we get the problem: If the screen size is at or below 480px, it still selects the 767px span since it is after the 480px span in the array. The expected behavior would be for the 480px query to override the 767px query since it is more specific to the current screen size.

This was easily solved for by altering my media queries to be the following:

(max-width: 480px)
(min-width: 481px) and (max-width: 767px)

Even though there was an easy work-around in my case, it took some digging for me to figure out which may be difficult for people who don't know how to debug javascript. I suggest either figuring out a way to fix this behavior or just adding an explanation of the behavior in the documentation.