It is perfectly acceptable to maintain your media queries at the bottom of your CSS file for optimal loading. I highly recommend utilizing a grid system with rows and columns to simplify layout design. When applying a media query, setting the column widths to 100% will stack the div elements accordingly. Additionally, ensure to adjust the navigation elements' classes and IDs for the responsive design.
Below is a sample grid system that I have developed to illustrate how navigation can be structured:
/* GRID */
*,*:before,*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.layout-row {
margin: 0 auto;
width: 96em;
zoom: 1;
}
.layout-row .layout-row { width: auto;}
.layout-row:before, .layout-row:after {
display: block;
visibility: hidden;
height: 0;
content: "\0020";
}
.layout-row:after { clear: both;}
.layout-column {
position: relative;
display: inline;
float: left;
padding: 1em ;
}
.layout-column .layout-column { padding: 0;}
.one { width: 8.33333%;}
two { width: 16.66667%;}
three { width: 25%;}
four { width: 33.33333%;}
five { width: 41.66667%;}
six { width: 50%;}
seven { width: 58.33333%;}
eight { width: 66.66667%;}
nine { width: 75%;}
ten { width: 83.33333%;}
eleven { width: 91.66667%;}
twelve { width: 100%;}
/* MODULES */
.layout-navigation { margin: -2em 0 0;}
.layout-navigation li {
float: left;
padding: 3em .75em .5em;
text-align: center;
}
/* MOBILE MEDIA QUERY */
@media only screen and (max-width: 480px) {
.layout-row { width: 48em;}
.layout-column { width: 100%;}
.hide-mobile { display: none;}
.layout-navigation li {
float: none;
padding: 1em;
background: #F3F3F3;
text-align: left;
}
}