Unclear media query placement example

[j9t]

The media query placement example is unclear (and can be seen as contradicting the rule).

While the rule suggests not to bundle media queries “at the end of the document,” the example can be understood as doing exactly that, as the media query block comes at the end of the sample, with nothing seemingly following it.

Something like adding more rules, a comment, or just an ellipsis could make this clearer:

.element { … }
.element-avatar { … }
.element-selected { … }

@media (min-width: 480px) {
  .element { … }
  .element-avatar { … }
  .element-selected { … }
}

.another-element { … }
.and-another-element { … }
.and-yet-another-element { … }