Add codepen example and also move block grid below offset docs!

diff --git a/docs/pages/xy-grid.md b/docs/pages/xy-grid.md
index ede94109472fcfee0087e74176b8636fd4871d08..5d8c020545c4f653c277f16c3a625dce06124ac5 100644 (file)
--- a/docs/pages/xy-grid.md
+++ b/docs/pages/xy-grid.md
@@ -190,12 +190,29 @@ There are times when you won't want each media query to be collapsed. In this ca
 
 ---
 
+## Offsets
+
+Offsets work by applying `margin-left` (or `margin-top` for a vertical grid) to a grid.
+
+```html_example
+<div class="grid-x grid-margin-x">
+  <div class="small-4 large-offset-2 cell">Offset 2 on large</div>
+  <div class="small-4 cell">4 cells</div>
+</div>
+```
+
+---
+
 ## Block Grids
 
-To define cell widths at a direction-level, instead of the individual cell level, add the class `.[size]-up-[n]` to a `grid-x` or `grid-y`, where `[n]` is the number of cells to display per direction, and `[size]` is the breakpoint at which to apply the effect.
+To define cell widths within a direction-level, instead of the individual cell level, add the class `.[size]-up-[n]` to a `grid-x` or `grid-y`, where `[n]` is the number of cells to display per direction, and `[size]` is the breakpoint at which to apply the effect.
 
 <div class="primary callout">This example uses padding grid but this can be used with margin grid too.</div>
 
+<div class="docs-codepen-container">
+<a class="codepen-logo-link" href="https://codepen.io/IamManchanda/pen/PjBLxE?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="grid-x grid-padding-x small-up-2 medium-up-4 large-up-6">
   <div class="cell">cell</div>
@@ -209,19 +226,6 @@ To define cell widths at a direction-level, instead of the individual cell level
 
 ---
 
-## Offsets
-
-Offsets work by applying `margin-left` (or `margin-top` for a vertical grid) to a grid.
-
-```html_example
-<div class="grid-x grid-margin-x">
-  <div class="small-4 large-offset-2 cell">Offset 2 on large</div>
-  <div class="small-4 cell">4 cells</div>
-</div>
-```
-
----
-
 ## Looking for Push Pull
 
 Push and pull are a bit of a hack solution and was only necessary for Float based grids. But for flexbox, this hack is not needed as [source ordering](flexbox-utilities.html#source-ordering) does this with ease.