ENGCOM-2605: [Backport] Resolved : Mobile device style groups incorrect order #17240

Stanislav Idolov · web-flow · commit 24a00c63c0b5 · 2018-07-31T17:48:11.000+03:00
diff --git a/lib/web/css/source/lib/_responsive.less b/lib/web/css/source/lib/_responsive.less
@@ -27,24 +27,24 @@
 
 & when (@media-target = 'mobile'), (@media-target = 'all') {
 
-    @media only screen and (max-width: (@screen__xxs - 1)) {
-        .media-width('max', @screen__xxs);
+    @media only screen and (max-width: @screen__m) {
+        .media-width('max', (@screen__m + 1));
     }
 
-    @media only screen and (max-width: (@screen__xs - 1)) {
-        .media-width('max', @screen__xs);
+    @media only screen and (max-width: (@screen__m - 1)) {
+        .media-width('max', @screen__m);
     }
 
     @media only screen and (max-width: (@screen__s - 1)) {
         .media-width('max', @screen__s);
     }
 
-    @media only screen and (max-width: (@screen__m - 1)) {
-        .media-width('max', @screen__m);
+    @media only screen and (max-width: (@screen__xs - 1)) {
+        .media-width('max', @screen__xs);
     }
 
-    @media only screen and (max-width: @screen__m) {
-        .media-width('max', (@screen__m + 1));
+    @media only screen and (max-width: (@screen__xxs - 1)) {
+        .media-width('max', @screen__xxs);
     }
 
     @media all and (min-width: @screen__s) {

Original file line number	Diff line number	Diff line change
`@@ -27,24 +27,24 @@`
`27`	`27`
`28`	`28`	`& when (@media-target = 'mobile'), (@media-target = 'all') {`
`29`	`29`
`30`		`- @media only screen and (max-width: (@screen__xxs - 1)) {`
`31`		`- .media-width('max', @screen__xxs);`
	`30`	`+ @media only screen and (max-width: @screen__m) {`
	`31`	`+ .media-width('max', (@screen__m + 1));`
`32`	`32`	`}`
`33`	`33`
`34`		`- @media only screen and (max-width: (@screen__xs - 1)) {`
`35`		`- .media-width('max', @screen__xs);`
	`34`	`+ @media only screen and (max-width: (@screen__m - 1)) {`
	`35`	`+ .media-width('max', @screen__m);`
`36`	`36`	`}`
`37`	`37`
`38`	`38`	`@media only screen and (max-width: (@screen__s - 1)) {`
`39`	`39`	`.media-width('max', @screen__s);`
`40`	`40`	`}`
`41`	`41`
`42`		`- @media only screen and (max-width: (@screen__m - 1)) {`
`43`		`- .media-width('max', @screen__m);`
	`42`	`+ @media only screen and (max-width: (@screen__xs - 1)) {`
	`43`	`+ .media-width('max', @screen__xs);`
`44`	`44`	`}`
`45`	`45`
`46`		`- @media only screen and (max-width: @screen__m) {`
`47`		`- .media-width('max', (@screen__m + 1));`
	`46`	`+ @media only screen and (max-width: (@screen__xxs - 1)) {`
	`47`	`+ .media-width('max', @screen__xxs);`
`48`	`48`	`}`
`49`	`49`
`50`	`50`	`@media all and (min-width: @screen__s) {`