jss: Incorrect order of media quieries

I get incorrect order of media queries (max-width). It should go from middle to small but it has inverse order. Thanks for help. Input:

  heading: {
    position: 'relative',

    margin: '0 0 40px 0',
    padding: '20px 0 20px',

    color: '#fff',
    fontFamily: 'Prompt',
    fontSize: 24,
    fontWeight: 400,
    lineHeight: 1.67,

    '&::before': {
      content: '""',
      position: 'absolute',
      bottom: 0,
      left: 0,

      width: 100,
      height: 1,

      backgroundColor: '#808080',
    },

    [`@media (max-width: ${middle}px)`]: {
      margin: '0 0 30px 0',
      padding: '15px 0 15px',

      fontSize: 20,
    },

    [`@media (max-width: ${small}px)`]: {
      margin: '0 0 20px 0',
      padding: '10px 0 10px',
    },
  },

Output:

@media (max-width: 600px) {
  .container-1284544947 {
    flex-direction: column;
  }
  .heading-1760943947 {
    margin: 0 0 20px 0;
    padding: 10px 0 10px;
  }
}
@media (max-width: 960px) {
  .heading-1760943947 {
    margin: 0 0 30px 0;
    padding: 15px 0 15px;
    font-size: 20px;
  }
  .navItem-3283730875 {
    font-size: 14px;
  }
}