diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 72bda5c820..0c538b8f60 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -5112,68 +5112,68 @@ a.list-group-item.active > .badge,
   visibility: hidden;
 }
 
-.visible-phone {
+.visible-sm {
   display: inherit !important;
 }
 
-.visible-tablet {
+.visible-md {
   display: none !important;
 }
 
-.visible-desktop {
+.visible-lg {
   display: none !important;
 }
 
-.hidden-phone {
+.hidden-sm {
   display: none !important;
 }
 
-.hidden-tablet {
+.hidden-md {
   display: inherit !important;
 }
 
-.hidden-desktop {
+.hidden-lg {
   display: inherit !important;
 }
 
 @media (min-width: 768px) and (max-width: 991px) {
-  .visible-phone {
+  .visible-sm {
     display: none !important;
   }
-  .visible-tablet {
+  .visible-md {
     display: inherit !important;
   }
-  .visible-desktop {
+  .visible-lg {
     display: none !important;
   }
-  .hidden-phone {
+  .hidden-sm {
     display: inherit !important;
   }
-  .hidden-tablet {
+  .hidden-md {
     display: none !important;
   }
-  .hidden-desktop {
+  .hidden-lg {
     display: inherit !important;
   }
 }
 
 @media (min-width: 992px) {
-  .visible-phone {
+  .visible-sm {
     display: none !important;
   }
-  .visible-tablet {
+  .visible-md {
     display: none !important;
   }
-  .visible-desktop {
+  .visible-lg {
     display: inherit !important;
   }
-  .hidden-phone {
+  .hidden-sm {
     display: inherit !important;
   }
-  .hidden-tablet {
+  .hidden-md {
     display: inherit !important;
   }
-  .hidden-desktop {
+  .hidden-lg {
     display: none !important;
   }
 }
diff --git a/docs/css.html b/docs/css.html
index 9684d778c3..aec71a4f48 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -1949,7 +1949,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <p class="lead">For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.</p>
 
     <h3>Responsive classes</h3>
-    <table class="table table-bordered table-striped responsive-utilities hidden-phone">
+    <table class="table table-bordered table-striped responsive-utilities hidden-sm">
       <thead>
         <tr>
           <th>Class</th>
@@ -1960,37 +1960,37 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       </thead>
       <tbody>
         <tr>
-          <th><code>.visible-phone</code></th>
+          <th><code>.visible-sm</code></th>
           <td class="is-visible">Visible</td>
           <td class="is-hidden">Hidden</td>
           <td class="is-hidden">Hidden</td>
         </tr>
         <tr>
-          <th><code>.visible-tablet</code></th>
+          <th><code>.visible-md</code></th>
           <td class="is-hidden">Hidden</td>
           <td class="is-visible">Visible</td>
           <td class="is-hidden">Hidden</td>
         </tr>
         <tr>
-          <th><code>.visible-desktop</code></th>
+          <th><code>.visible-lg</code></th>
           <td class="is-hidden">Hidden</td>
           <td class="is-hidden">Hidden</td>
           <td class="is-visible">Visible</td>
         </tr>
         <tr>
-          <th><code>.hidden-phone</code></th>
+          <th><code>.hidden-sm</code></th>
           <td class="is-hidden">Hidden</td>
           <td class="is-visible">Visible</td>
           <td class="is-visible">Visible</td>
         </tr>
         <tr>
-          <th><code>.hidden-tablet</code></th>
+          <th><code>.hidden-md</code></th>
           <td class="is-visible">Visible</td>
           <td class="is-hidden">Hidden</td>
           <td class="is-visible">Visible</td>
         </tr>
         <tr>
-          <th><code>.hidden-desktop</code></th>
+          <th><code>.hidden-lg</code></th>
           <td class="is-visible">Visible</td>
           <td class="is-visible">Visible</td>
           <td class="is-hidden">Hidden</td>
@@ -2029,16 +2029,16 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <h4>Visible on...</h4>
     <p>Green checkmarks indicate that class is visible in your current viewport.</p>
     <ul class="responsive-utilities-test">
-      <li>Phone<span class="visible-phone">&#10004; Phone</span></li>
-      <li>Tablet<span class="visible-tablet">&#10004; Tablet</span></li>
-      <li>Desktop<span class="visible-desktop">&#10004; Desktop</span></li>
+      <li>Phone<span class="visible-sm">&#10004; Phone</span></li>
+      <li>Tablet<span class="visible-md">&#10004; Tablet</span></li>
+      <li>Desktop<span class="visible-lg">&#10004; Desktop</span></li>
     </ul>
     <h4>Hidden on...</h4>
     <p>Here, green checkmarks indicate that class is hidden in your current viewport.</p>
     <ul class="responsive-utilities-test hidden-on">
-      <li>Phone<span class="hidden-phone">&#10004; Phone</span></li>
-      <li>Tablet<span class="hidden-tablet">&#10004; Tablet</span></li>
-      <li>Desktop<span class="hidden-desktop">&#10004; Desktop</span></li>
+      <li>Phone<span class="hidden-sm">&#10004; Phone</span></li>
+      <li>Tablet<span class="hidden-md">&#10004; Tablet</span></li>
+      <li>Desktop<span class="hidden-lg">&#10004; Desktop</span></li>
     </ul>
 
   </div>
diff --git a/less/responsive-utilities.less b/less/responsive-utilities.less
index c69851bb96..71a1588463 100644
--- a/less/responsive-utilities.less
+++ b/less/responsive-utilities.less
@@ -36,35 +36,35 @@
 // Visibility utilities
 
 // For Phones
-.visible-phone     { display: inherit !important; }
-.visible-tablet    { display: none !important; }
-.visible-desktop   { display: none !important; }
+.visible-sm     { display: inherit !important; }
+.visible-md    { display: none !important; }
+.visible-lg   { display: none !important; }
 
-.hidden-phone      { display: none !important; }
-.hidden-tablet     { display: inherit !important; }
-.hidden-desktop    { display: inherit !important; }
+.hidden-sm      { display: none !important; }
+.hidden-md     { display: inherit !important; }
+.hidden-lg    { display: inherit !important; }
 
 
 // Tablets & small desktops only
 @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
-  .visible-phone    { display: none !important; }
-  .visible-tablet    { display: inherit !important; }
-  .visible-desktop   { display: none !important; }
+  .visible-sm    { display: none !important; }
+  .visible-md    { display: inherit !important; }
+  .visible-lg   { display: none !important; }
 
-  .hidden-phone      { display: inherit !important; }
-  .hidden-tablet     { display: none !important; }
-  .hidden-desktop    { display: inherit !important; }
+  .hidden-sm      { display: inherit !important; }
+  .hidden-md     { display: none !important; }
+  .hidden-lg    { display: inherit !important; }
 }
 
 // For desktops
 @media (min-width: @screen-desktop) {
-  .visible-phone     { display: none !important; }
-  .visible-tablet    { display: none !important; }
-  .visible-desktop   { display: inherit !important; }
+  .visible-sm     { display: none !important; }
+  .visible-md    { display: none !important; }
+  .visible-lg   { display: inherit !important; }
 
-  .hidden-phone      { display: inherit !important; }
-  .hidden-tablet     { display: inherit !important; }
-  .hidden-desktop    { display: none !important; }
+  .hidden-sm      { display: inherit !important; }
+  .hidden-md     { display: inherit !important; }
+  .hidden-lg    { display: none !important; }
 }
 
 // Print utilities