Rearrange the ordering of the content in a correct way!

I messed this in Previous PR but now corrected it!

diff --git a/docs/pages/flexbox-utilities.md b/docs/pages/flexbox-utilities.md
index 409896795b6f08e6b339d8c23271f500e6132e00..a596a587413492bad4f58caa8319323d0672820c 100644 (file)
--- a/docs/pages/flexbox-utilities.md
+++ b/docs/pages/flexbox-utilities.md
@@ -199,16 +199,6 @@ For children, there are 3 quick helper classes to apply the flex property. These
 - `.flex-child-grow` (flex child that will grow to take up all possible space)
 - `.flex-child-shrink` (flex child that will shrink to minimum possible space)
 
-### Responsive Classes 
-
-<div class="callout alert">
-  <p><strong>Depreciation Notice:</strong> From v6.5.x, we are disabling responsive classes by default. You would be able to re-enable it though, with setting that <code>$flexbox-responsive-breakpoints</code> to <code>true</code> .</p>
-</div>
-
-These vanilla flexbox helper classes also have an optional mobile first responsive classes so that setting a class will apply to the small breakpoint and large unless overridden by a class for a larger breakpoint.. Example: `class="flex-child-shrink large-flex-child-auto"` will be shrink on the small and medium breakpoints and then auto on large. 
-
-These optional responsive classes can be disabled by setting `$flexbox-responsive-breakpoints` to `false`. See [here](#sass-variables)
-
 ```html_example
 <div class="grid-x grid-padding-x">
   <div class="cell small-4 flex-container flex-dir-column">
@@ -222,7 +212,17 @@ These optional responsive classes can be disabled by setting `$flexbox-responsiv
 </div>
 ```
 
-All of these helper classes come in responsive varieties, prefixed with all of your named breakpoints. So you can do things like:
+### Responsive Classes 
+
+<div class="callout alert">
+  <p><strong>Depreciation Notice:</strong> From v6.5.x, we are disabling responsive classes by default. You would be able to re-enable it though, with setting that <code>$flexbox-responsive-breakpoints</code> to <code>true</code> .</p>
+</div>
+
+All of these helper classes come in responsive varieties, prefixed with all of your named breakpoints.
+
+These vanilla flexbox helper classes also have an optional mobile first responsive classes so that setting a class will apply to the small breakpoint and large unless overridden by a class for a larger breakpoint.. Example: `class="flex-child-shrink large-flex-child-auto"` will be shrink on the small and medium breakpoints and then auto on large. 
+
+These optional responsive classes can be disabled by setting `$flexbox-responsive-breakpoints` to `false`. See [here](#sass-variables)
 
 ```html_example
 <div class="grid-x grid-padding-x">