[Backport] Resolved : Mobile device style groups incorrect order

[tejash-wagento]

Original Pull Request

#16959

Description

Style groups for mobile devices (max-width) are specified in the wrong order.

In lib/web/css/source/lib/_responsive.less the style groups run breakpoint-size ascending: 319px, 479px, 639px, 767px, which leads to outputting max-width media queries breakpoint-size ascending - the last-defined breakpoint overrides smaller screen size breakpoints...

Fixed Issues (if relevant)

Style groups for mobile devices (max-width) are specified in the wrong order.

1. magento/magento2Mobile device style groups incorrect order in _responsive.less #14476: Mobile device style groups incorrect order in _responsive.less
2. ...

Expected result

CSS should be output as follows:

@media only screen and (max-width: 479px) {
  .logo {
    max-width: 140px;
  }
}
@media only screen and (max-width: 639px) {
  .logo {
    max-width: 165px;
  }
}

Actual result

CSS is output as follows:

@media only screen and (max-width: 639px) {
  .logo {
    max-width: 165px;
  }
}
@media only screen and (max-width: 479px) {
  .logo {
    max-width: 140px;
  }
}

Contribution checklist

• Pull request has a meaningful description of its purpose
• All commits are accompanied by meaningful commit messages
• All new or changed code is covered with unit/integration tests (if applicable)
• All automated tests passed successfully (all builds on Travis CI are green)

[ihor-sviziev]

Hi @miguelbalparda,
We already have backport PR in #17240

[magento-engcom-team]

Hi @miguelbalparda, thank you for the review.
ENGCOM-2603 has been created to process this Pull Request