Arrange the media queries

Beginners
1

Hello, I have a question regarding the order of media queries. I have created some breakpoints in my test page and assigned them to the selectors for the respective view. Only I ask myself, what am I doing wrong. Pinegrow does not automatically arrange the media queries together, but creates extra entries.
h1 {
font-size: 65px;
}

@media (max-width:320px) {
h1 {
font-size: 44px;
}
}

p {
font-size: 15px;
}

@media (max-width:319px) {
p {
font-size: 23px;
}
}

So I have to copy everything by hand into the respective rule afterwards. Am I doing something wrong here? It would be much easier if the respective elements were placed directly under the respective media queries.

2

when you add new rules via the Create button on the Active tab in the style editor it will place the new rule at the bottom of your .css file.

if that happens to be where the media query you are targeting, then great. no harm.

otherwise it can be a mess.

generally when i create a new rule, i don’t use the Create button, but use the the stylesheet view to insert my new rule in the location where i want to keep it. Or i create it in a code view editor where i can see what’s going on.