min/max-width are revealed in reverse order at the browser

Question

Like the picture above, min/max-width are shown in reverse order at the browser even I've written the min-width as a first, and max-width as a second in the editor.

But the bizarre thing is, it works perfectly fine. There's no problem about functional. The browser goes changing properties when the width are greater/lesser than specific numbers what I've set.

Will this be a problem in near future?

Answer 1

It's the default order shown by the browser. No matter how you order the media query in your code 'max' property will always appear first.