The generated CSS will have the media queries in the order that they are specified here. So if you had reversed the order here, the generated CSS would look like this:

```css
@media (min-width: 1200px) { ... }
@media (min-width: 980px) { ... }
@media (min-width: 480px) { ... }
```

This does not break the grid, since the media queries would still be activated in the right order once the browser expanded to a certain width. The order that the media queries are defined in does not matter for this responsive grid.