media queries will be preferred over later defined global selectors

[GoogleCodeExporter]

I found the bug when using and overriding padding in Bootstrap .jumbotron 
classes.

Description: To simplify the problem look at this example to provoke the 
respond.js bug:

    .shouldBeGreen {
      display: table-cell;
      background-color: gray;
      width: 100px;
      height: 100px;
      text-align: center;
      vertical-align: middle;
    }

    @media screen and (min-width: 50px) {
      .shouldBeGreen {
        background-color: red;
        font-weight: bold;
      }
    }


    /* Later in the CSS or in another LESS file... */


    /* Will be overridden by respond.js */
    .shouldBeGreen {
      background-color: green;
    }

Open my attached example page in Chrome/FF/Opera/Safari and IE8 (emulated or 
not) to compare the problem.


Behaviour: The script picks all relevant media query parts and puts them after 
the source CSS file which results in overriding all associated selectors 
defined after the media query.

Solution: I racked my brains about this, but don't have a solution at this 
point.

Here is my bug report to Respond.js which has exactly the same problem: 
https://github.com/scottjehl/Respond/issues/225

Original issue reported on code.google.com by [email protected] on 16 Sep 2013 at 1:58

Attachments:

• css3-mediaqueries.js-bug.zip