[Forwardport] Resolved : Mobile device style groups incorrect order

[torhoehn]

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)

[magento-engcom-team]

Hi @torhoehn. Thank you for your contribution
Here is some useful tips how you can test your changes using Magento test environment.
Add the comment under your pull request to deploy test or vanilla Magento instance:

• @magento-engcom-team give me test instance - deploy test instance based on PR changes
• @magento-engcom-team give me {$VERSION} instance - deploy vanilla Magento instance

For more details, please, review the Magento Contributor Assistant documentation

[magento-engcom-team]

Hi @ihor-sviziev, thank you for the review.
ENGCOM-2561 has been created to process this Pull Request

[ihor-sviziev]

Hi @tejash-wagento,
Please do not close such PRs. They were already approved and probably they might be already tested.
As author of original PR you will get 5 points even not your PR was accepted.
Details: https://github.com/magento/magento2/wiki/Contribution-Rewards#base-achievements

[magento-engcom-team]

Hi @ihor-sviziev, thank you for the review.
ENGCOM-2604 has been created to process this Pull Request

[magento-engcom-team]

Hi @torhoehn. Thank you for your contribution.
We will aim to release these changes as part of 2.3.0.
Please check the release notes for final confirmation.