fix(css): update order demo (#2660)

* fix(css): update order demo

* box -> Box

* one more

Author: OnkarRuikar

live-examples/css-examples/flexbox/order.css

@@ -1,16 +1,28 @@
 .default-example {
   max-height: 300px;
   display: flex;
+  flex-flow: column;
 }
 
 .default-example > div {
   background-color: rgba(0, 0, 255, 0.2);
   border: 3px solid blue;
-  margin: 10px;
+  margin: 0.5rem;
+  padding: 0.5rem;
   flex: 1;
 }
 
 #example-element {
   background-color: rgba(255, 0, 200, 0.2);
   border: 3px solid rebeccapurple;
 }
+
+#example-element::after {
+  content: attr(style);
+  background: #444;
+  font-family: monospace;
+}
+
+code {
+  background: #444;
+}

live-examples/css-examples/flexbox/order.html

@@ -1,27 +1,27 @@
 <section id="example-choice-list" class="example-choice-list large" data-property="order">
   <div class="example-choice" initial-choice="true">
-    <pre><code class="language-css">order: 3;</code></pre>
+    <pre><code class="language-css">order: 0;</code></pre>
     <button type="button" class="copy hidden" aria-hidden="true">
       <span class="visually-hidden">Copy to Clipboard</span>
     </button>
   </div>
 
   <div class="example-choice">
-    <pre><code class="language-css">order: -1;</code></pre>
+    <pre><code class="language-css">order: 3;</code></pre>
     <button type="button" class="copy hidden" aria-hidden="true">
       <span class="visually-hidden">Copy to Clipboard</span>
     </button>
   </div>
 
   <div class="example-choice">
-    <pre><code class="language-css">order: 2;</code></pre>
+    <pre><code class="language-css">order: -1;</code></pre>
     <button type="button" class="copy hidden" aria-hidden="true">
       <span class="visually-hidden">Copy to Clipboard</span>
     </button>
   </div>
 
   <div class="example-choice">
-    <pre><code class="language-css">order: 4;</code></pre>
+    <pre><code class="language-css">order: 2;</code></pre>
     <button type="button" class="copy hidden" aria-hidden="true">
       <span class="visually-hidden">Copy to Clipboard</span>
     </button>
@@ -30,10 +30,10 @@
 
 <div id="output" class="output large hidden">
   <section id="default-example" class="default-example">
-    <div id="example-element" class="transition-all">Order me</div>
-    <div style="order: 1">Order 1</div>
-    <div style="order: 2">Order 2</div>
-    <div style="order: 2">Order 2</div>
-    <div style="order: 3">Order 3</div>
+    <div id="example-element" class="transition-all">Box 1:&nbsp;</div>
+    <div style="order: 1">Box 2: <code>order: 1;</code></div>
+    <div style="order: 2">Box 3: <code>order: 2;</code></div>
+    <div style="order: 2">Box 4: <code>order: 2;</code></div>
+    <div style="order: 3">Box 5: <code>order: 3;</code></div>
   </section>
 </div>