After further investigations of my own, I determined that the problem was that for whatever reason, both stylesheets were being called at once, rather than independently as they were meant to, and the conflicting instructions caused rendering errors. Rather than referencing the stylesheets in the HTML as above, I rewrote the CSS to incorporate the mobile-size rules within the same file:
@media only screen and (max-device-width: 700px) {
<rules for smaller screens go here>
}
To write the rules this way requires them to cooperate with the existing rules, but has greater compatibility, and from what I’ve seen is more in line with current best practices. (Please feel free to speak up if you’ve heard otherwise.)