title: Why do I have to put media queries at the bottom of the stylesheet?
body: <p>I am new to learning responsive design. What I have noticed on my journey is that when I put media queries at the bottom of the stylesheet, everything works flawlessly in regards to  breakpoints. If I put the media queries at the top of the stylesheet, nothing works, and only recently I found out that I need to add <code>!important</code> and <code>max-DEVICE-width</code> ( as opposed to <code>max-width</code>) to the css that is being changed.</p>
  <p>Why is this? Why do the media queries work on both desktop and mobile when put at the bottom of the stylesheet.</p>
  <p>Why is it that when I put media queries on the top of the stylesheet I need to add <code>!important</code> and also <code>max-DEVICE-width</code> in order for the breakpoints to work on desktop and mobile?</p>