fixes #17412: reverse display heading classes to match h1-h6 headings

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>
+        <td><h1 class="display-1">Display 1</h1></td>
       </tr>
       <tr>
-      <td><h1 class="display-3">Display 3</h1></td>
+      <td><h1 class="display-2">Display 2</h1></td>
       </tr>
       <tr>
-      <td><h1 class="display-2">Display 2</h1></td>
+      <td><h1 class="display-3">Display 3</h1></td>
       </tr>
       <tr>
-      <td><h1 class="display-1">Display 1</h1></td>
+      <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

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;