Fixes #8770: mobile-first (stacked by default) horizontal dls

css.html

@@ -807,7 +807,7 @@ base_url: "../"
 {% endhighlight %}
 
     <h4>Horizontal description</h4>
-    <p>Make terms and descriptions in <code>&lt;dl&gt;</code> line up side-by-side.</p>
+    <p>Make terms and descriptions in <code>&lt;dl&gt;</code> line up side-by-side. Starts off stacked like default <code>&lt;dl&gt;</code>s, but when the navbar expands, so do these.</p>
     <div class="bs-example">
       <dl class="dl-horizontal">
         <dt>Description lists</dt>

dist/css/bootstrap.css

@@ -564,7 +564,8 @@ dd {
   margin-left: 0;
 }
 
-.dl-horizontal dt {
+@media (min-width: 768px) {
+  .dl-horizontal dt {
     float: left;
     width: 160px;
     overflow: hidden;
@@ -572,30 +573,26 @@ dd {
     text-align: right;
     text-overflow: ellipsis;
     white-space: nowrap;
-}
-
-.dl-horizontal dd {
+  }
+  .dl-horizontal dd {
     margin-left: 180px;
-}
-
-.dl-horizontal dd:before,
-.dl-horizontal dd:after {
+  }
+  .dl-horizontal dd:before,
+  .dl-horizontal dd:after {
     display: table;
     content: " ";
-}
-
-.dl-horizontal dd:after {
+  }
+  .dl-horizontal dd:after {
     clear: both;
-}
-
-.dl-horizontal dd:before,
-.dl-horizontal dd:after {
+  }
+  .dl-horizontal dd:before,
+  .dl-horizontal dd:after {
     display: table;
     content: " ";
-}
-
-.dl-horizontal dd:after {
+  }
+  .dl-horizontal dd:after {
     clear: both;
+  }
 }
 
 abbr[title],

less/type.less

@@ -141,8 +141,14 @@ dt {
 dd {
   margin-left: 0; // Undo browser default
 }
-// Horizontal layout (like forms)
-.dl-horizontal {
+
+// Horizontal description lists
+//
+// Defaults to being stacked without any of the below styles applied, until the
+// grid breakpoint is reached (default of ~768px).
+
+@media (min-width: @grid-float-breakpoint) {
+  .dl-horizontal {
     dt {
       float: left;
       width: (@component-offset-horizontal - 20);
@@ -151,8 +157,9 @@ dd {
       .text-overflow();
     }
     dd {
-    .clearfix(); // Clear the floated `dt` if an empty `dd` is present
       margin-left: @component-offset-horizontal;
+      .clearfix(); // Clear the floated `dt` if an empty `dd` is present
+    }
   }
 }