CSS priority order for responsive goes wrong

[trandaison]

Describe the bug
Does anyone meet this issue before? I have a CStack with the width as below:

<c-stack
  my="10"
  mx="6"
  p="6"
  spacing="4"
  bg="white"
  :w="{ base: '100%', md: '28rem' }"
>
  ...
</c-stack>

The result is: the box is always 100% width in any screen width; because the css order is wrong

To Reproduce
Check out this repo from codesandbox:
https://codesandbox.io/s/codesandbox-nuxt-typescript-forked-77352?file=/pages/index.vue:351-494

Expected behavior
The order should be corrected.

Screenshots

Desktop (please complete the following information):

• OS: MacOS 11.1
• Browser: Any browser
• Version: Latest

Smartphone (please complete the following information):

• N/A