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 following example page in Chrome/FF/Opera/Safari and IE8 (emulated or not) to compare the problem.

<http://krnl.de/resources/respond.js-bug/index.html>

**Behaviour:**
Respond.js 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: <https://github.com/scottjehl/Respond/issues/225>