SASS：反向地图键

Question

我对生成的CSS订单有疑问。 手机上不应显示元素（但在平板电脑和桌面上），因此它会获得以下类：

.d-none .d-tablet-block

在CSS文件中'd-none'出现在'd-tablet-block'之后。因此，'d-tablet-block'总是被覆盖。

这是我目前的CSS。它由SASS Mixin生成。

@media (min-width: 840px) {
  .d-desktop-inline {
    display: inline!important
  }
}

@media (min-width: 480px) {
  .d-tablet-inline {
    display: inline!important
  }
}

.d-inline {
  display: inline!important
}

我需要相同的CSS但按顺序

.d-inline {
  display: inline!important
}

@media (min-width: 480px) {
  .d-tablet-inline {
    display: inline!important
  }
}

@media (min-width: 840px) {
  .d-desktop-inline {
    display: inline!important
  }
}

我的断点来自Google Web Components。如果我把Phone放在这里并且桌面关闭，那么CSS将以正确的顺序生成。 但遗憾的是，Google Web Components的其他组件将无法使用。

$mdc-layout-grid-breakpoints: (
  desktop: 840px,
  tablet: 480px,
  phone: 0
);

这是SASS Mixin：

@function breakpoint-infix($name, $breakpoints: $mdc-layout-grid-breakpoints) {
  @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
}

@function breakpoint-min($name, $breakpoints: $mdc-layout-grid-breakpoints) {
  $min: map-get($breakpoints, $name);
  @return if($min != 0, $min, null);
}

@mixin media-breakpoint-up($name, $breakpoints: $mdc-layout-grid-breakpoints) {
  $min: breakpoint-min($name, $breakpoints);

  @if $min {
    @media (min-width: $min) {
      @content;
    }
  } @else {
    @content;
  }
}

@each $breakpoint in map-keys($mdc-layout-grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $mdc-layout-grid-breakpoints);

    .d#{$infix}-none         { display: none !important; }
    .d#{$infix}-inline       { display: inline !important; }
    .d#{$infix}-inline-block { display: inline-block !important; }
    .d#{$infix}-block        { display: block !important; }
    .d#{$infix}-table        { display: table !important; }
    .d#{$infix}-table-row    { display: table-row !important; }
    .d#{$infix}-table-cell   { display: table-cell !important; }
    .d#{$infix}-flex         { display: flex !important; }
    .d#{$infix}-inline-flex  { display: inline-flex !important; }
  }
}

我可以以某种方式反转地图键（$ mdc-layout-grid-breakpoints）吗？