css - Why do I have to put media queries at the bottom of the stylesheet? -

i new learning responsive design. have noticed on journey when put media queries @ bottom of stylesheet, works flawlessly in regards breakpoints. if put media queries @ top of stylesheet, nothing works, , found out need add !important , max-device-width ( opposed max-width) css being changed.

why this? why media queries work on both desktop , mobile when put @ bottom of stylesheet.

why when put media queries on top of stylesheet need add !important , max-device-width in order breakpoints work on desktop , mobile?

because css read top bottom. rule set last, 1 executed.

translating, this:

@media (max-width: 600px) { //if screen fits size     .text {         color: red; //paint red     } }  .text {     color: yellow; //now, forget , paint yellow! } 

when add !important saying:

@media (max-width: 600px) { //if screen fits size     .text {         color: red !important; //paint red, , don't change ever!!!     } }  .text {     color: yellow; //ok, i'm not going paint yellow.... }