Environment

a new project generated with vitesse-lite

what happened:

I'm trying to add some responsive class onto an element. if I add a large screen first then a smaller screen, the larger one will be overridden. Which caused unexpected behavior. In the example below, the bg will be always green.

I also tested on the playground, the same thing happened.

potential way to fix

For the responsive class the media query order matters. Need to find a way to enforce it.