Move Source ordering from flex grid to flexbox utilities page!

diff --git a/docs/pages/flex-grid.md b/docs/pages/flex-grid.md
index 50e053f4d298f6eee0b1efed90108d510a969ae3..0ad2ff36b7b757530a3da419ca5572ea8b1a3b9a 100644 (file)
--- a/docs/pages/flex-grid.md
+++ b/docs/pages/flex-grid.md
@@ -368,43 +368,6 @@ Offsets work identically to the float grid, by applying `margin-left` to a colum
 
 ---
 
-## Source Ordering
-
-Flexbox supports source ordering, making it easy to rearrange columns on different screen sizes without weird relative positioning tricks.
-
-The CSS property is easy enough to remember.
-
-```scss
-.element {
-  order: 1;
-}
-```
-
-Columns within a row will be sorted by their `order` property. Lower numbers are placed first. If multiple columns have the same number, they're sorted in the order they appear in the HTML.
-
-We have a set of classes that make it easy to setup source ordering in your HTML. They also come in responsive flavors, allowing you to reorder a grid on different screen sizes.
-
-<p>
-  <a class="" data-open-video="27:19"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
-</p>
-
-<div class="docs-codepen-container">
-  <a class="codepen-logo-link" href="http://codepen.io/ZURBFoundation/pen/gWedmK?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
-</div>
-
-```html_example
-<div class="row">
-  <div class="column small-order-2 medium-order-1">
-    This column will come second on small, and first on medium and larger.
-  </div>
-  <div class="column small-order-1 medium-order-2">
-    This column will come first on small, and second on medium and larger.
-  </div>
-</div>
-```
-
----
-
 ## Block Grids
 
 To define column widths at the row-level, instead of the individual column level, add the class `.[size]-up-[n]` to a row, where `[n]` is the number of columns to display per row, and `[size]` is the breakpoint at which to apply the effect.

diff --git a/docs/pages/flexbox-utilities.md b/docs/pages/flexbox-utilities.md
index 0d19edbe433cccaec4394acc522731f735022534..fd6b5019c7dedbefb78c15952d3a02bcdf495b85 100644 (file)
--- a/docs/pages/flexbox-utilities.md
+++ b/docs/pages/flexbox-utilities.md
@@ -213,6 +213,43 @@ All of these helper classes come in responsive varieties, prefixed with all of y
 
 ---
 
+## Source Ordering
+
+Flexbox supports source ordering, making it easy to rearrange columns on different screen sizes without weird relative positioning tricks.
+
+The CSS property is easy enough to remember.
+
+```scss
+.element {
+  order: 1;
+}
+```
+
+Columns within a row will be sorted by their `order` property. Lower numbers are placed first. If multiple columns have the same number, they're sorted in the order they appear in the HTML.
+
+We have a set of classes that make it easy to setup source ordering in your HTML. They also come in responsive flavors, allowing you to reorder a grid on different screen sizes.
+
+<p>
+  <a class="" data-open-video="27:19"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+</p>
+
+<div class="docs-codepen-container">
+  <a class="codepen-logo-link" href="http://codepen.io/ZURBFoundation/pen/gWedmK?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+</div>
+
+```html_example
+<div class="row">
+  <div class="column small-order-2 medium-order-1">
+    This column will come second on small, and first on medium and larger.
+  </div>
+  <div class="column small-order-1 medium-order-2">
+    This column will come first on small, and second on medium and larger.
+  </div>
+</div>
+```
+
+---
+
 ## Helper Mixins
 
 If you're using the Sass version of Foundation, you can access the above helpers as mixins as well.