diff --git a/docs/content/typography.md b/docs/content/typography.md
index 2c0207375efd558a30712dbe33d548541e438c1d..0c6d53aa2ea61c6d631b6f111c987efd8f4273a8 100644
--- a/docs/content/typography.md
+++ b/docs/content/typography.md
@@ -232,7 +232,7 @@ Align terms and descriptions horizontally by using our grid system's predefined
 
   <dt class="col-sm-3">Euismod</dt>
   <dd class="col-sm-9">Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
-  <dd class="col-sm-9 col-sm-offset-3">Donec id elit non mi porta gravida at eget metus.</dd>
+  <dd class="col-sm-9 offset-sm-3">Donec id elit non mi porta gravida at eget metus.</dd>
 
   <dt class="col-sm-3">Malesuada porta</dt>
   <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
@@ -243,8 +243,8 @@ Align terms and descriptions horizontally by using our grid system's predefined
   <dt class="col-sm-3">Nesting</dt>
   <dd class="col-sm-9">
     <dl class="row">
-      <dt class="col-sm-3">Nested definition list</dt>
-      <dd class="col-sm-9">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
+      <dt class="col-sm-4">Nested definition list</dt>
+      <dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
     </dl>
   </dd>
 </dl>
diff --git a/scss/_type.scss b/scss/_type.scss
index 9fe8194db56bf826a3a68c63d000f7655c950057..1075757795d4d0b70edaff12d12d8c9052630bb6 100644
--- a/scss/_type.scss
+++ b/scss/_type.scss
@@ -137,3 +137,14 @@ mark,
     content: "\00A0 \2014"; // nbsp, em dash
   }
 }
+
+@if not $enable-flex {
+  // Clean up some horizontal `<dl>`s built with grids
+  // scss-lint:disable QualifyingElement
+  dl.row {
+    > dd + dt {
+      clear: left;
+    }
+  }
+  // scss-lint:enable QualifyingElement
+}