How do you organize your CSS on Responsive SItes?

HTML & CSS
2

I get the idea of grouping references to the same selector together, it’s not my style, but accept a lot of people prefer to do that, each to their own. But don’t see the need for the opposite query.

#masthead{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    max-width: 1200px;        /**/
    margin: 0 auto;                                            /* Center element. */
/*    padding: 0 20px;        /**/
    border-collapse: collapse;                    /* Allows border. (Collapses margins/padding.) */
    font-size: 0.9rem;
    line-height: 1.1;
}


/* masthead: Row 2 (Top Menu)                */

/* Top Menu: Drop-down (Mobile) */
@media screen and (max-width: 700px){
    nav#topMenu{
        position: relative;
        display: block;
        width: 100%;
        height: 40px;
    }
}
/* Top Menu: Horizontal (Desktop) */
    nav#topMenu{
        position: relative;
        display: table-row;
}

This makes more sense, the two are still together on the sheet, but without a totally unnecessary query.