use .col-xs-* in "Forms: Column Sizing" docs so more responsive

1 files changed, 12 insertions, 12 deletions

diff --git a/css.html b/css.html
index 48d963cf4..919844e0f 100644
--- a/css.html
+++ b/css.html
@@ -1985,28 +1985,28 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <div class="bs-example">
       <form role="form">
         <div class="row">
-          <div class="col-lg-2">
-            <input type="text" class="form-control" placeholder=".col-lg-2">
+          <div class="col-xs-2">
+            <input type="text" class="form-control" placeholder=".col-xs-2">
           </div>
-          <div class="col-lg-3">
-            <input type="text" class="form-control" placeholder=".col-lg-3">
+          <div class="col-xs-3">
+            <input type="text" class="form-control" placeholder=".col-xs-3">
           </div>
-          <div class="col-lg-4">
-            <input type="text" class="form-control" placeholder=".col-lg-4">
+          <div class="col-xs-4">
+            <input type="text" class="form-control" placeholder=".col-xs-4">
           </div>
         </div>
       </form>
     </div><!-- /.bs-example -->
 {% highlight html %}
 <div class="row">
-  <div class="col-lg-2">
-    <input type="text" class="form-control" placeholder=".col-lg-2">
+  <div class="col-xs-2">
+    <input type="text" class="form-control" placeholder=".col-xs-2">
   </div>
-  <div class="col-lg-3">
-    <input type="text" class="form-control" placeholder=".col-lg-3">
+  <div class="col-xs-3">
+    <input type="text" class="form-control" placeholder=".col-xs-3">
   </div>
-  <div class="col-lg-4">
-    <input type="text" class="form-control" placeholder=".col-lg-4">
+  <div class="col-xs-4">
+    <input type="text" class="form-control" placeholder=".col-xs-4">
   </div>
 </div>
 {% endhighlight %}