[Bug Report] Override Vuetify 2 SASS variables of grid, is working but the order of output classes is wrong

[mort3za]

Environment

Browsers: Chromium 80.0.3987.87
OS: Ubuntu undefined

Steps to reproduce

1. create a vue project with sass support (dart-sass)
2. add vuetify by cli (vue add vuetify) and choose default option
3. add variables.scss to src/styles/variables.scss:

$grid-breakpoints: (
  'xxs': 0,
  'xs': 375,
  'sm': 600px,
  'md': 960px,
  'lg': 1280px - 16px,
  'xl': 1920px - 16px,
  'xxl': 2560px - 16px
);

4. add this template somewhere and inspect it by devtools:

    <v-row>
      <v-col cols="12" md="4">1</v-col>
      <v-col cols="12" md="4">1</v-col>
      <v-col cols="12" md="4">1</v-col>
    </v-row>

Expected Behavior

CSS specificity of .col-12 should be less than col-md-4

Actual Behavior

CSS specificity of .col-12 is higher than col-md-4, so col-md-4 never applies.

Reproduction Link

Other comments

vuetify version: 2.2.17
sass version: 1.25.0
vuetify-loader version: 1.4.3

Github source for sample project: https://github.com/mort3za/temp-vuetify

[KaelWD]

Duplicate of vuetifyjs/vuetify#7933