diff --git a/docs/content/typography.md b/docs/content/typography.md
index 264686b054..e97593e2ef 100644
--- a/docs/content/typography.md
+++ b/docs/content/typography.md
@@ -85,26 +85,26 @@ Traditional heading elements are designed to work best in the meat of your page
   <table class="table">
     <tbody>
       <tr>
-        <td><h1 class="display-4">Display 4</h1></td>
-      </tr>
-      <tr>
-      <td><h1 class="display-3">Display 3</h1></td>
+        <td><h1 class="display-1">Display 1</h1></td>
       </tr>
       <tr>
       <td><h1 class="display-2">Display 2</h1></td>
       </tr>
       <tr>
-      <td><h1 class="display-1">Display 1</h1></td>
+      <td><h1 class="display-3">Display 3</h1></td>
+      </tr>
+      <tr>
+      <td><h1 class="display-4">Display 4</h1></td>
       </tr>
     </tbody>
   </table>
 </div>
 
 {% highlight html %}
-<h1 class="display-4">Display 4</h1>
-<h1 class="display-3">Display 3</h1>
-<h1 class="display-2">Display 2</h1>
 <h1 class="display-1">Display 1</h1>
+<h1 class="display-2">Display 2</h1>
+<h1 class="display-3">Display 3</h1>
+<h1 class="display-4">Display 4</h1>
 {% endhighlight %}
 
 ## Lead
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 70ac7f38ce..6c7cdf5a2c 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -143,10 +143,10 @@ $font-size-h4:               1.5rem !default;
 $font-size-h5:               1.25rem !default;
 $font-size-h6:               1rem !default;
 
-$display1-size:               3.5rem !default;
-$display2-size:               4.5rem !default;
-$display3-size:               5.5rem !default;
-$display4-size:               6rem !default;
+$display1-size:               6rem !default;
+$display2-size:               5.5rem !default;
+$display3-size:               4.5rem !default;
+$display4-size:               3.5rem !default;
 
 $display1-weight:             300 !default;
 $display2-weight:             300 !default;