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

Because css is read from top to bottom. The rule that is set last, is the one that will be executed.

Translating, it is like this:

@media (max-width: 600px) { //If my screen fits this size
    .text {
        color: red; //Paint it red
    }
}

.text {
    color: yellow; //Now, forget about everything and paint it yellow!
}

When you add !important is like saying:

@media (max-width: 600px) { //If my screen fits this size
    .text {
        color: red !important; //Paint it red, and don't change it ever!!!
    }
}

.text {
    color: yellow; //Ok, I'm not going to paint it yellow....
}

CSS is read from top to bottom. Everything that is below some other css will overwrite what's on top of it. It is possible however to use !important at the end of a CSS parameter to make it overwrite everything else

body{
    background-color: black !important;
}

body{
    background-color: pink;
}

The background-color will be black. If you remove the !important, it will be pink.