Document flex order

pages/css/utilities/flexbox.md

@@ -600,6 +600,49 @@ Use these classes to adjust the alignment of an individual flex item on the cros
 </div>
 ```
 
+## Order
+
+Use these classes to change the order of flex items. Keep in mind that it won't affect screen readers or navigating with the keyboard and it's advised to keep the markup in a logical source order.
+
+#### CSS
+
+```css
+.flex-order-1    { order: 1; }
+.flex-order-2    { order: 2; }
+.flex-order-none { order: inherit; }
+
+```
+
+#### Classes
+
+| Class | Description |
+| --- | --- |
+| `.flex-order-1` | Set order to be 1 |
+| `.flex-order-2` | Set order to be 2  |
+| `.flex-order-none` | Remove order (typically used with responsive variants) |
+
+#### flex-order (1+2)
+
+```html
+<div class="border d-flex">
+  <div class="p-5 border bg-gray-light flex-order-2">1. .flex-order-2</div>
+  <div class="p-5 border bg-gray-light">2.</div>
+  <div class="p-5 border bg-gray-light flex-order-1">3. .flex-order-1</div>
+</div>
+```
+
+#### flex-order-none
+
+Resize window to see the effect.
+
+```html
+<div class="border d-flex">
+  <div class="p-5 border bg-gray-light flex-order-1 flex-md-order-none">1. .flex-order-1 .flex-md-order-none</div>
+  <div class="p-5 border bg-gray-light">2.</div>
+  <div class="p-5 border bg-gray-light">3.</div>
+</div>
+```
+
 ## Responsive flex utilities
 
 All flexbox utilities can be adjusted per [breakpoint](/css/objects/grid#breakpoints) using the following formulas:

src/utilities/flexbox.scss

@@ -50,8 +50,8 @@
       flex-basis: 0;
     }
 
-    .flex#{$variant}-order-none { order: inherit !important; }
     .flex#{$variant}-order-1 { order: 1 !important; }
     .flex#{$variant}-order-2 { order: 2 !important; }
+    .flex#{$variant}-order-none { order: inherit !important; }
   }
 }