gulpのcssコンパイルで小さな画面サイズから大きな画面サイズへと順にメディアクエリを出力したいのですが、順序が崩れてしまう

タイトル通りの内容です「gulpのcssコンパイルでmixinで指定した通りメディアクエリがcssにでないです
gulpファイル

// gulpfile.js
const gulp = require('gulp'),
  bs = require('browser-sync'),
  changed = require('gulp-changed'),
  plumber = require('gulp-plumber'),
  gulpSass = require('gulp-sass'),
  sourcemaps = require('gulp-sourcemaps'),
  bourbon = require('node-bourbon'),
  gulpPostcss = require('gulp-postcss'),
  autoprefixer = require('autoprefixer'),
  stylelint = require('stylelint'),
  rename = require('gulp-rename'),
  sortMediaQueries = require("node-css-mqpacker"),
  gulpImagemin = require('gulp-imagemin'),
  mozjpeg = require('imagemin-mozjpeg'),
  pngquant = require('imagemin-pngquant'),
  ejs = require('gulp-ejs'),
  fs = require('fs'),
  del = require('del'),
  notify = require('gulp-notify'),
  htmlbeautify = require("gulp-html-beautify"),
  webpackStream = require("webpack-stream"),
  webpack = require("webpack");

const setting = {
  prefixer: {
    cascade: false,
    grid: "autoplace"
  },
  srcDir: 'docroot/html/', 
  destDir: 'docroot/html/', 
  destRoot: 'docroot/html/', 
  jsonDir: 'docroot/_json/',
  tmplDir: 'docroot/_templates/',
  assetSrcDir: 'docroot/_src/', 
  assetDistDir: 'docroot/html/assets/', 
  webpack: require("./webpack.config")
};
bourbon.with('assets/css/**/*.css', setting.assetSrcDir + 'scss/**/*.scss');

const ejs_src = [
  setting.tmplDir + "page/**/*.ejs"
];
const json_src = JSON.parse(fs.readFileSync(setting.jsonDir + 'config.json'));



const lintSass = () => {
  return gulp
    .src(setting.assetSrcDir + 'scss/**/*.scss', {
      since: gulp.lastRun(lintSass)
    })
    .pipe(plumber())
    .pipe(gulpPostcss([
      stylelint({
        fix: true,
        // reporters: [
        //     { formatter: "string", console: true }
        // ]
      })
    ], {syntax: require('postcss-scss')}))
    .pipe(gulp.dest(setting.assetSrcDir + 'scss'));
}
exports.lintSass = lintSass;



const sassCompile = () => {
  const processors = [
    autoprefixer(setting.prefixer),
    sortMediaQueries()
  ];

  return gulp.src([
    setting.assetSrcDir + 'scss/**/*.scss',
    '!' + setting.assetSrcDir + 'scss/lib-admin/**/*.scss'
  ])
    .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
    .pipe(sourcemaps.init())
    .pipe(gulpSass({
      includePaths: bourbon.includePaths,
      outputStyle: 'expanded'
    }))
    .pipe(gulpPostcss(processors))
    .pipe(sourcemaps.write('./maps'))
    .pipe(gulp.dest(setting.assetDistDir + 'css'));
};
exports.sassCompile = sassCompile;

const ejsCompile = () => {
  return gulp.src(ejs_src)
    .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
    .pipe(ejs({json: json_src}))
    .pipe(rename({extname: '.html'}))
    .pipe(htmlbeautify({
      "indent_size": 4,
      "indent_char": " ",
      "max_preserve_newlines": 0,
      "preserve_newlines": false,
      "extra_liners": [],
    }))
    .pipe(gulp.dest(setting.destDir));
}
exports.ejsCompile = ejsCompile;



const htmlDel = () => {
  return del(setting.destDir + '*.html')
}
exports.htmlDel = htmlDel;



const webpackJs = () => {
  return webpackStream(setting.webpack, webpack)
    .pipe(gulp.dest(setting.assetDistDir + 'js'));
};
exports.webpackJs = webpackJs;



const sync = done => {
  const initObj = {
    port: 8080,
    server: setting.destRoot,
    reloadOnRestart: true,
    notify: false,
    ghostMode: false
  };
  bs.init(initObj);
  done();
};

const browserReload = done => {
  bs.reload();
  done();
  console.log('Browser reload completed');
};


const watchFiles = done => {
  gulp.watch([setting.assetSrcDir + 'img/**/*'], {interval: 500}, gulp.series(imageMin, browserReload));
  gulp.watch([setting.assetSrcDir + 'js/**/*.js'], {interval: 500}, gulp.series(webpackJs, browserReload));
  gulp.watch([setting.tmplDir + '**/*.ejs'], {interval: 500}, gulp.series(ejsCompile, browserReload));
  gulp.watch([
    setting.assetSrcDir + 'scss/**/*.scss',
    '!' + setting.assetSrcDir + 'scss/lib-admin/**/*.scss'
  ], {interval: 200}, gulp.series(sassCompile, browserReload));//lintSass, 
  done();
};

mixinファイル

$breakpoint-xsm: 320px !default;
$breakpoint-sm: 576px !default;
$breakpoint-md: 768px !default;
$breakpoint-lg: 1000px !default;
 
@mixin xsm {
  @media screen and ( min-width : ( $breakpoint-xsm ) ) {
    @content;
  }
}

@mixin sm {
  @media screen and ( min-width : ( $breakpoint-sm ) ) {
    @content;
  }
}

@mixin md {
  @media screen and ( min-width : ( $breakpoint-md ) ) {
    @content;
  }
}

@mixin lg {
  @media screen and ( min-width : ( $breakpoint-lg ) ) {
    @content;
  }
}

// mixin    @include mq("md") {}
$breakpoints: (
  "xsm":"screen and (min-width: 320px)",
  "sm":"screen and (min-width: 576px)",
  "md":"screen and (min-width: 768px)",
  "lg":"screen and (min-width: 1000px)",
) !default;

@mixin mq($breakpoint: xsm) {
  @media #{map-get( $breakpoints, $breakpoint )} {
    @content;
  }
}

@media screen and (min-width: 768px) {←これが一番上に配置される
}
@media screen and (min-width: 320px) {
}
@media screen and (min-width: 576px) {
}
@media screen and (min-width: 1000px) {
}