#media not working with width less than 1024px - css

Question

I have a flex-box grid of divs.
I want to change width of that div (in %) depending on screen size.
My scss #media:
#media (max-width: 1023.9px) {
width: 33.3333%;
}
#media (max-width: 768px) {
width: 50%;
}
#media (max-width: 599px) {
width: 100%;
}
#media (min-width: 1024px) {
width: 25%;
}
But when I test that in Chrome's Responsive tool, I got only this:
Case of 500px width, It doesn't change,
When I change my screen size to 1020, it's OK, max-width: 1023.9px is working.
1200 is OK, min-width: 1024px is working. But less than 1024 - I get that strange things. What do I do wrong?
Generated css for my grid-class:
.image-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
width: 100%;
background-color: #f6f6f6; }
.image-grid .image-wrapper {
width: 25%;
position: relative; }
.image-grid .image-wrapper::before {
display: block;
content: '';
width: 100%;
padding-top: 88.23529%; }
#media (max-width: 1023.9px) {
.image-grid .image-wrapper {
width: 33.3333%; } }
#media (max-width: 768px) {
.image-grid .image-wrapper {
width: 50%; } }
#media (max-width: 599px) {
.image-grid .image-wrapper {
width: 100%; } }
#media (min-width: 1024px) {
.image-grid .image-wrapper {
width: 25%; } }
Hmm, now It works fine when I resize my browser window, I normally get my 1 column with 550px and 2 columns with 700px. Question is answered, but in "Responsive" tool 550px and 700px still not working. Maybe I don't understand the tool.
Finally solved. The problem was totally dumb: I forgot adding meta tag, so Responsive tool didn't work properly. Don't forget about that important line. <meta name="viewport" content="width=device-width, initial-scale=1.0">

Answer 1

Every rule in CSS is able to override any previous rule to the same selector. So you just need to switch your code in order to get it working:
#media (max-width: 1023.9px) {
width: 33.3333%;
}
// experimental
#media (max-width: 1000px) {
width: 50%;
}
#media (max-width: 768px) {
width: 50%;
}
#media (max-width: 599px) {
width: 100%;
}
//
#media (min-width: 1024px) {
width: 25%;
}
The reason why your rules override each other is because they all have the same selector and while max-width: 599px is accurate and correct, the later appearing max-width: 1023.9px is it, too and thus it’s overriding the previous width: 100%; from the max-width: 599px media query.
And a side note here: Use integer values only for media queries. There is no screen in the world, which has .9 or even .5 pixels.

Answer 2

CSS is the acronym of Cascade Style Sheet.
This means that rules are matched in a cascade fashion. If you have a viewport width between 1000 and 1024, the 33.3333% is the last that matches and it will be applied, overriding all the previous.
Once you know it, you can change your code in a proper way. If you don't want to re-think your code, you can prevent the overriding using !important.
#media (max-width: 1000px) {
width: 50% !important;
}
Warning: Using !important is a bad practice, the reason is here