The layer structure of the default responsive css files is (from bottom to top): global → default → narrow → normal → wide
How the CSS Files Activate
Knowing this, let's look at those five CSS files again.
global.css: This CSS file always activates. In one sense, it's the "mobile" stylesheet, since it's the only CSS that will activate for a mobile site.
But global.css is also, well, global, since it activates for every width. For instance, if you set a heading font here, the headings will be that font no matter what the size.
Of course, the other CSS files can override global.css. But global.css comes first.
example-alpha-default.css: Once you get wider than a mobile screen, example-alpha-default.css always activates. This means that the narrow, normal, and wide sizes all first activate global.css, and then example-alpha-default.css.
But each of these wider sizes then also activates its own CSS file.
example-alpha-default-narrow.css activates for narrow sites (like tablets).
example-alpha-default-normal.css activates for normal sites (desktop monitors that aren't widescreens).
But here's the key. The normal size does not activate the narrow CSS file, example-alpha-default-narrow.css.
The normal size activates global.css and example-alpha-default.css. But then it skips the narrow CSS, and activates its own special stylesheet, example-alpha-default-normal.css.
example-alpha-default-wide.css: Finally, wide screens activate global.css and example-alpha-default.css, then example-alpha-default-wide.css.