diff --git a/docs/documentation/modifiers/typography-helpers.html b/docs/documentation/modifiers/typography-helpers.html
index eefacd74..408df530 100644
--- a/docs/documentation/modifiers/typography-helpers.html
+++ b/docs/documentation/modifiers/typography-helpers.html
@@ -47,6 +47,12 @@ doc-subtab: typography-helpers
 </td>
 {% endcapture %}
 
+{% capture left %}
+<td class="is-narrow">
+  <p class="notification is-success">left-aligned</p>
+</td>
+{% endcapture %}
+
 {% include subnav-modifiers.html %}
 
 <section class="section">
@@ -268,6 +274,99 @@ doc-subtab: typography-helpers
 
     <hr>
 
+    <h3 class="title">Responsive Alignment</h3>
+
+    <div class="content">
+      <p>
+        You can now <strong>align text</strong> for <em>each</em> viewport width. You simply need to append the <strong>viewport width</strong> to the alignment modifier.
+      </p>
+      
+      <p>
+        For example, here are the modifiers for <code>.has-text-left</code>:
+      </p>
+    </div>
+
+    <table class="table is-bordered">
+      {{ thead }}
+      <tbody>
+        <tr>
+          <td><code>has-text-left-mobile</code></td>
+          {{ left }}
+          {{ unchanged }}
+          {{ unchanged }}
+          {{ unchanged }}
+          {{ unchanged }}
+        </tr>
+        <tr>
+          <td><code>has-text-left-tablet</code></td>
+          {{ unchanged }}
+          {{ left }}
+          {{ left }}
+          {{ left }}
+          {{ left }}
+        </tr>
+        <tr>
+          <td><code>has-text-left-tablet-only</code></td>
+          {{ unchanged }}
+          {{ left }}
+          {{ unchanged }}
+          {{ unchanged }}
+          {{ unchanged }}
+        </tr>
+        <tr>
+          <td><code>has-text-left-touch</code></td>
+          {{ left }}
+          {{ left }}
+          {{ unchanged }}
+          {{ unchanged }}
+          {{ unchanged }}
+        </tr>
+        <tr>
+          <td><code>has-text-left-desktop</code></td>
+          {{ unchanged }}
+          {{ unchanged }}
+          {{ left }}
+          {{ left }}
+          {{ left }}
+        </tr>
+        <tr>
+          <td><code>has-text-left-desktop-only</code></td>
+          {{ unchanged }}
+          {{ unchanged }}
+          {{ left }}
+          {{ unchanged }}
+          {{ unchanged }}
+        </tr>
+        <tr>
+          <td><code>has-text-left-widescreen</code></td>
+          {{ unchanged }}
+          {{ unchanged }}
+          {{ unchanged }}
+          {{ left }}
+          {{ left }}
+        </tr>
+        <tr>
+          <td><code>has-text-left-widescreen-only</code></td>
+          {{ unchanged }}
+          {{ unchanged }}
+          {{ unchanged }}
+          {{ left }}
+          {{ unchanged }}
+        </tr>
+        <tr>
+          <td><code>has-text-left-fullhd</code></td>
+          {{ unchanged }}
+          {{ unchanged }}
+          {{ unchanged }}
+          {{ unchanged }}
+          {{ left }}
+        </tr>
+      </tbody>
+    </table>
+    </div>
+
+    <hr>
+
     <h3 class="title">Text transformation</h3>
 
     <div class="content">