Show min- and max-width media inspector labels in the correct order

Currently, min- and max-width labels in media inspector markers are
shown incorrectly on the left side, with the max-width on the inside.

This change swaps the labels so that they are shown in the correct
order on the left side.

Before: https://i.imgur.com/8egqiV1.png
After: https://i.imgur.com/CYAZd80.png

Bug: 952695
Change-Id: I06f7db2fa345a007dce2ebc3b3d6f44b7845f43c
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2238227
Reviewed-by: Paul Lewis <aerotwist@chromium.org>
Commit-Queue: Paul Lewis <aerotwist@chromium.org>

AUTHORS

@@ -22,4 +22,5 @@ Rajasekar Murugan <rajasekar89be@gmail.com>
 Gabriel Luong <gabriel.luong@gmail.com>
 Alex Rudenko <alexei.rudenko@gmail.com>
 Ankit Mishra <ankit.mishra131990@gmail.com>
-Julian Geppert <spctstr@gmail.com>
+Julian Geppert <spctstr@gmail.com>
+Edward Trist <edwardtrist@gmail.com>

front_end/emulation/MediaQueryInspector.js

@@ -304,8 +304,8 @@ export class MediaQueryInspector extends UI.Widget.Widget {
       const leftElement = result.createChild('div', 'media-inspector-marker media-inspector-marker-min-max-width');
       leftElement.style.width = (maxWidthValue - minWidthValue) * 0.5 + 'px';
       leftElement.title = model.mediaText();
-      appendLabel(leftElement, model.minWidthExpression(), true, false);
-      appendLabel(leftElement, model.maxWidthExpression(), false, true);
+      appendLabel(leftElement, model.maxWidthExpression(), true, false);
+      appendLabel(leftElement, model.minWidthExpression(), false, true);
       result.createChild('div', 'media-inspector-marker-spacer').style.flex = '0 0 ' + minWidthValue + 'px';
       const rightElement = result.createChild('div', 'media-inspector-marker media-inspector-marker-min-max-width');
       rightElement.style.width = (maxWidthValue - minWidthValue) * 0.5 + 'px';