diff --git a/components.html b/components.html
index 9bd2b3d48b..a428529b15 100644
--- a/components.html
+++ b/components.html
@@ -2065,22 +2065,22 @@ body { padding-bottom: 70px; }
     <p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>
     <div class="bs-example">
       <div class="row">
-        <div class="col-lg-3">
+        <div class="col-sm-6 col-md-3">
           <a href="#" class="thumbnail">
             <img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
           </a>
         </div>
-        <div class="col-lg-3">
+        <div class="col-sm-6 col-md-3">
           <a href="#" class="thumbnail">
             <img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
           </a>
         </div>
-        <div class="col-lg-3">
+        <div class="col-sm-6 col-md-3">
           <a href="#" class="thumbnail">
             <img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
           </a>
         </div>
-        <div class="col-lg-3">
+        <div class="col-sm-6 col-md-3">
           <a href="#" class="thumbnail">
             <img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
           </a>
@@ -2089,7 +2089,7 @@ body { padding-bottom: 70px; }
     </div><!-- /.bs-example -->
 {% highlight html %}
 <div class="row">
-  <div class="col-lg-3">
+  <div class="col-sm-6 col-md-3">
     <a href="#" class="thumbnail">
       <img data-src="holder.js/100%x180" alt="...">
     </a>
@@ -2102,7 +2102,7 @@ body { padding-bottom: 70px; }
     <p>With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.</p>
     <div class="bs-example">
       <div class="row">
-        <div class="col-lg-4">
+        <div class="col-sm-6 col-md-3">
           <div class="thumbnail">
             <img data-src="holder.js/300x200" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
             <div class="caption">
@@ -2112,7 +2112,7 @@ body { padding-bottom: 70px; }
             </div>
           </div>
         </div>
-        <div class="col-lg-4">
+        <div class="col-sm-6 col-md-3">
           <div class="thumbnail">
             <img data-src="holder.js/300x200" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
             <div class="caption">
@@ -2122,7 +2122,7 @@ body { padding-bottom: 70px; }
             </div>
           </div>
         </div>
-        <div class="col-lg-4">
+        <div class="col-sm-6 col-md-3">
           <div class="thumbnail">
             <img data-src="holder.js/300x200" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
             <div class="caption">
@@ -2136,7 +2136,7 @@ body { padding-bottom: 70px; }
     </div><!-- /.bs-example -->
 {% highlight html %}
 <div class="row">
-  <div class="col-lg-4">
+  <div class="col-sm-6 col-md-3">
     <div class="thumbnail">
       <img data-src="holder.js/300x200" alt="...">
       <div class="caption">