Combine media queries or write them where it suits?

I'm a fan of writing media queries underneath the original "normal" rule. For example, let's say I want to change the width of a couple of different elements, which are written at different places in the style sheet, depending upon the viewport width. I would typically do this:

.thing {
    width: 50%;
}
@media (min-width: 30rem) {
    .thing {
        width: 75%;
    }
}
/* A few more styles would go between them */
.thing2 {
    width: 65%;
}
@media (min-width: 30rem) {
    .thing2 {
        width: 75%;
    }
}

Can you see in this example, we have two separate media queries written testing for the same thing: @media (min-width: 30rem)? Surely duplicating media at-rules like this is overly verbose and wasteful? Shouldn't I be advocating grouping all the like media queries into a single block like this:

.thing {
    width: 50%;
}
.thing2 {
    width: 65%;
}
@media (min-width: 30rem) {
 ...