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,6 +564,7 @@ dd {
   margin-left: 0;
 }
 
+@media (min-width: 768px) {
   .dl-horizontal dt {
     float: left;
     width: 160px;
@@ -573,30 +574,26 @@ dd {
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-
   .dl-horizontal dd {
     margin-left: 180px;
   }
-
   .dl-horizontal dd:before,
   .dl-horizontal dd:after {
     display: table;
     content: " ";
   }
-
   .dl-horizontal dd:after {
     clear: both;
   }
-
   .dl-horizontal dd:before,
   .dl-horizontal dd:after {
     display: table;
     content: " ";
   }
-
   .dl-horizontal dd:after {
     clear: both;
   }
+}
 
 abbr[title],
 abbr[data-original-title] {

less/type.less

@@ -141,7 +141,13 @@ dt {
 dd {
   margin-left: 0; // Undo browser default
 }
-// Horizontal layout (like forms)
+
+// 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;
@@ -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
+    }
   }
 }