Merge pull request #7704 from twitter/bs3_moar_grid_changes

BS3: Overhaul grid system once more

5 files changed, 240 insertions, 235 deletions

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 5ebb752be..97e43f22c 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -784,107 +784,98 @@ pre code {
   margin-left: -15px;
 }
 
-[class*="col-span-"],
-[class*="col-small-"] {
+.col {
   position: relative;
+  float: left;
+  width: 100%;
   min-height: 1px;
   padding-right: 15px;
   padding-left: 15px;
 }
 
-[class*="col-small-"] {
-  float: left;
-}
-
-.col-small-span-12 {
+.col-sm-12 {
   width: 100%;
 }
 
-.col-small-span-11 {
+.col-sm-11 {
   width: 91.66666666666666%;
 }
 
-.col-small-span-10 {
+.col-sm-10 {
   width: 83.33333333333334%;
 }
 
-.col-small-span-9 {
+.col-sm-9 {
   width: 75%;
 }
 
-.col-small-span-8 {
+.col-sm-8 {
   width: 66.66666666666666%;
 }
 
-.col-small-span-7 {
+.col-sm-7 {
   width: 58.333333333333336%;
 }
 
-.col-small-span-6 {
+.col-sm-6 {
   width: 50%;
 }
 
-.col-small-span-5 {
+.col-sm-5 {
   width: 41.66666666666667%;
 }
 
-.col-small-span-4 {
+.col-sm-4 {
   width: 33.33333333333333%;
 }
 
-.col-small-span-3 {
+.col-sm-3 {
   width: 25%;
 }
 
-.col-small-span-2 {
+.col-sm-2 {
   width: 16.666666666666664%;
 }
 
-.col-small-span-1 {
+.col-sm-1 {
   width: 8.333333333333332%;
 }
 
 @media screen and (min-width: 768px) {
-  .container {
-    max-width: 728px;
-  }
-  [class*="col-span-"] {
-    float: left;
-  }
-  .col-span-12 {
+  .col-lg-12 {
     width: 100%;
   }
-  .col-span-11 {
+  .col-lg-11 {
     width: 91.66666666666666%;
   }
-  .col-span-10 {
+  .col-lg-10 {
     width: 83.33333333333334%;
   }
-  .col-span-9 {
+  .col-lg-9 {
     width: 75%;
   }
-  .col-span-8 {
+  .col-lg-8 {
     width: 66.66666666666666%;
   }
-  .col-span-7 {
+  .col-lg-7 {
     width: 58.333333333333336%;
   }
-  .col-span-6 {
+  .col-lg-6 {
     width: 50%;
   }
-  .col-span-5 {
+  .col-lg-5 {
     width: 41.66666666666667%;
   }
-  .col-span-4 {
+  .col-lg-4 {
     width: 33.33333333333333%;
   }
-  .col-span-3 {
+  .col-lg-3 {
     width: 25%;
   }
-  .col-span-2 {
+  .col-lg-2 {
     width: 16.666666666666664%;
   }
-  .col-span-1 {
+  .col-lg-1 {
     width: 8.333333333333332%;
   }
   .col-offset-12 {
@@ -997,6 +988,12 @@ pre code {
   }
 }
 
+@media screen and (min-width: 768px) {
+  .container {
+    max-width: 728px;
+  }
+}
+
 @media screen and (min-width: 992px) {
   .container {
     max-width: 940px;
@@ -1009,9 +1006,9 @@ pre code {
   }
 }
 
-[class*="col-span-"].pull-right {
+/*[class*="col-span-"].pull-right {
   float: right;
-}
+}*/
 
 table {
   max-width: 100%;
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index ff605b21e..74c604e78 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -124,13 +124,13 @@ section > ul li {
 .show-grid {
   margin-bottom: 15px;
 }
-.show-grid [class*="col-span-"] {
+.show-grid .col {
   padding-top: 10px;
   padding-bottom: 10px;
   background-color: #eee;
   border: 1px solid #ddd;
 }
-.show-grid [class*="col-span-"]:hover {
+.show-grid .col:hover {
   background-color: #ddd;
 }
 
diff --git a/docs/docs.html b/docs/docs.html
index c405293ea..b134416cc 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -20,22 +20,22 @@ title: Bootstrap Documentation
     </div>
     <p class="lead">There are a few easy ways to quickly get started with Bootstrap, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p>
     <div class="row">
-      <div class="col-span-6">
+      <div class="col col-lg-6">
         <h3>Compiled CSS and JS</h3>
         <p><strong>The fastest way to get started:</strong> get the compiled and minified versions of our CSS, JavaScript, and fonts. No documentation or original source files are included.</p>
         <p><a class="btn btn-large btn-primary" href="assets/bootstrap.zip" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);">Download Bootstrap</a></p>
       </div>
-      <div class="col-span-6">
+      <div class="col col-lg-6">
         <h3>Latest source code</h3>
         <p>Get the original files for all CSS and JavaScript, along with a local copy of the docs by downloading the latest version directly from GitHub.</p>
         <p><a class="btn btn-large" href="https://github.com/twitter/bootstrap/zipball/master" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download source']);">Download Bootstrap source</a></p>
       </div>
-      <div class="col-span-6">
+      <div class="col col-lg-6">
         <h3>Clone or fork via GitHub</h3>
         <p>Clone the entire project or fork your own version of Bootstrap to make it your own by visiting us on GitHub.</p>
         <p><a class="btn btn-large" href="https://github.com/twitter/bootstrap/" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'GitHub project']);">GitHub repository</a></p>
       </div>
-      <div class="col-span-6">
+      <div class="col col-lg-6">
         <h3>Bower</h3>
         <p>Install and manage the original files for all CSS and JavaScript, along with a local copy of the docs, using <a href="http://twitter.github.com/bower">Bower</a>.</p>
         {% highlight bash %}$ bower install bootstrap{% endhighlight %}
@@ -110,63 +110,63 @@ title: Bootstrap Documentation
 
     <h3>Examples</h3>
     <div class="row bs-docs-examples">
-      <div class="col-span-4">
+      <div class="col col-lg-4">
         <a class="thumbnail" href="/examples/starter-template/" target="_blank">
           <img src="/assets/img/examples/bootstrap-example-starter.png" alt="">
         </a>
         <h4>Starter template</h4>
         <p>A barebones HTML page with Bootstrap's CSS and JavaScript included.</p>
       </div>
-      <div class="col-span-4">
+      <div class="col col-lg-4">
         <a class="thumbnail" href="/examples/grid/" target="_blank">
           <img src="/assets/img/examples/bootstrap-example-grid.png" alt="">
         </a>
         <h4>Basic grid layouts</h4>
         <p>Simple grid layouts to familiarize you with using the Bootstrap grid system.</p>
       </div>
-      <div class="col-span-4">
+      <div class="col col-lg-4">
         <a class="thumbnail" href="/examples/jumbotron/" target="_blank">
           <img src="/assets/img/examples/bootstrap-example-marketing.png" alt="">
         </a>
         <h4>Basic marketing site</h4>
         <p>Features a jumbotron for primary message and three supporting elements.</p>
       </div>
-      <div class="col-span-4">
+      <div class="col col-lg-4">
         <a class="thumbnail" href="/examples/jumbotron-narrow/" target="_blank">
           <img src="/assets/img/examples/bootstrap-example-jumbotron-narrow.png" alt="">
         </a>
         <h4>Narrow marketing</h4>
         <p>Slim, lightweight marketing template for small projects or teams.</p>
       </div>
-      <div class="col-span-4">
+      <div class="col col-lg-4">
         <a class="thumbnail" href="/examples/justified-nav/" target="_blank">
           <img src="/assets/img/examples/bootstrap-example-justified-nav.png" alt="">
         </a>
         <h4>Justified nav</h4>
         <p>Marketing page with equal-width navigation links in a modified navbar.</p>
       </div>
-      <div class="col-span-4">
+      <div class="col col-lg-4">
         <a class="thumbnail" href="/examples/signin/" target="_blank">
           <img src="/assets/img/examples/bootstrap-example-signin.png" alt="">
         </a>
         <h4>Sign in</h4>
         <p>Barebones sign in form with custom, larger form controls and a flexible layout.</p>
       </div>
-      <div class="col-span-4">
+      <div class="col col-lg-4">
         <a class="thumbnail" href="/examples/sticky-footer/" target="_blank">
           <img src="/assets/img/examples/bootstrap-example-sticky-footer.png" alt="">
         </a>
         <h4>Sticky footer</h4>
         <p>Pin a fixed-height footer to the bottom of the user's viewport.</p>
       </div>
-      <div class="col-span-4">
+      <div class="col col-lg-4">
         <a class="thumbnail" href="/examples/sticky-footer-navbar/" target="_blank">
           <img src="/assets/img/examples/bootstrap-example-sticky-footer-navbar.png" alt="">
         </a>
         <h4>Sticky footer w/ navbar</h4>
         <p>Add a fixed navbar to the default sticky footer template.</p>
       </div>
-      <div class="col-span-4">
+      <div class="col col-lg-4">
         <a class="thumbnail" href="/examples/carousel/" target="_blank">
           <img src="/assets/img/examples/bootstrap-example-carousel.png" alt="">
         </a>
@@ -174,21 +174,21 @@ title: Bootstrap Documentation
         <p>An interactive riff on the basic marketing site featuring a prominent carousel.</p>
       </div>
 
-      <div class="col-span-4">
+      <div class="col col-lg-4">
         <a class="thumbnail" href="/examples/navbar/" target="_blank">
           <img src="/assets/img/examples/bootstrap-example-navbar.png" alt="">
         </a>
         <h4>Navbar</h4>
         <p>Basic template for showcasing how the navbar works.</p>
       </div>
-      <div class="col-span-4">
+      <div class="col col-lg-4">
         <a class="thumbnail" href="/examples/navbar-static-top/" target="_blank">
           <img src="/assets/img/examples/bootstrap-example-navbar-static-top.png" alt="">
         </a>
         <h4>Static top navbar</h4>
         <p>Basic template for showcasing the static navbar variation.</p>
       </div>
-      <div class="col-span-4">
+      <div class="col col-lg-4">
         <a class="thumbnail" href="/examples/navbar-fixed-top/" target="_blank">
           <img src="/assets/img/examples/bootstrap-example-navbar-fixed-top.png" alt="">
         </a>
@@ -338,81 +338,81 @@ title: Bootstrap Documentation
     <p>On mobile devices, the grid starts out stacked. Above 768px, it becomes horizontal as media queries kick in to apply <code>float</code>s and <code>width</code>s. To create a basic grid layout, wrap a series of <code>.col-span-*</code> elements within a <code>.row</code>. As this is a 12-column grid, each <code>.col-span-*</code> spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent), even at mobile resolutions.</p>
     <div class="bs-docs-grid">
       <div class="row show-grid">
-        <div class="col-span-1">1</div>
-        <div class="col-span-1">1</div>
-        <div class="col-span-1">1</div>
-        <div class="col-span-1">1</div>
-        <div class="col-span-1">1</div>
-        <div class="col-span-1">1</div>
-        <div class="col-span-1">1</div>
-        <div class="col-span-1">1</div>
-        <div class="col-span-1">1</div>
-        <div class="col-span-1">1</div>
-        <div class="col-span-1">1</div>
-        <div class="col-span-1">1</div>
+        <div class="col col-lg-1">1</div>
+        <div class="col col-lg-1">1</div>
+        <div class="col col-lg-1">1</div>
+        <div class="col col-lg-1">1</div>
+        <div class="col col-lg-1">1</div>
+        <div class="col col-lg-1">1</div>
+        <div class="col col-lg-1">1</div>
+        <div class="col col-lg-1">1</div>
+        <div class="col col-lg-1">1</div>
+        <div class="col col-lg-1">1</div>
+        <div class="col col-lg-1">1</div>
+        <div class="col col-lg-1">1</div>
       </div>
       <div class="row show-grid">
-        <div class="col-span-4">4</div>
-        <div class="col-span-4">4</div>
-        <div class="col-span-4">4</div>
+        <div class="col col-lg-4">4</div>
+        <div class="col col-lg-4">4</div>
+        <div class="col col-lg-4">4</div>
       </div>
       <div class="row show-grid">
-        <div class="col-span-6">6</div>
-        <div class="col-span-6">6</div>
+        <div class="col col-lg-6">6</div>
+        <div class="col col-lg-6">6</div>
       </div>
     </div>
 {% highlight html linenos %}
 <div class="row">
-  <div class="col-span-1">1</div>
-  <div class="col-span-1">1</div>
-  <div class="col-span-1">1</div>
-  <div class="col-span-1">1</div>
-  <div class="col-span-1">1</div>
-  <div class="col-span-1">1</div>
-  <div class="col-span-1">1</div>
-  <div class="col-span-1">1</div>
-  <div class="col-span-1">1</div>
-  <div class="col-span-1">1</div>
-  <div class="col-span-1">1</div>
-  <div class="col-span-1">1</div>
+  <div class="col col-lg-1">1</div>
+  <div class="col col-lg-1">1</div>
+  <div class="col col-lg-1">1</div>
+  <div class="col col-lg-1">1</div>
+  <div class="col col-lg-1">1</div>
+  <div class="col col-lg-1">1</div>
+  <div class="col col-lg-1">1</div>
+  <div class="col col-lg-1">1</div>
+  <div class="col col-lg-1">1</div>
+  <div class="col col-lg-1">1</div>
+  <div class="col col-lg-1">1</div>
+  <div class="col col-lg-1">1</div>
 </div>
 <div class="row">
-  <div class="col-span-4">4</div>
-  <div class="col-span-4">4</div>
-  <div class="col-span-4">4</div>
+  <div class="col col-lg-4">4</div>
+  <div class="col col-lg-4">4</div>
+  <div class="col col-lg-4">4</div>
 </div>
 <div class="row">
-  <div class="col-span-6">6</div>
-  <div class="col-span-6">6</div>
+  <div class="col col-lg-6">6</div>
+  <div class="col col-lg-6">6</div>
 </div>
 {% endhighlight %}
 
     <h3 id="grid-offsetting">Offsetting columns</h3>
-    <p>Move columns to the right using <code>.col-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-offset-4</code> moves <code>.col-span-4</code> over four columns.</p>
+    <p>Move columns to the right using <code>.col-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-offset-4</code> moves <code>.col col-lg-4</code> over four columns.</p>
     <div class="bs-docs-grid">
       <div class="row show-grid">
-        <div class="col-span-4">4</div>
-        <div class="col-span-4 col-offset-4">4 offset 4</div>
+        <div class="col col-lg-4">4</div>
+        <div class="col col-lg-4 col-offset-4">4 offset 4</div>
       </div><!-- /row -->
       <div class="row show-grid">
-        <div class="col-span-3 col-offset-3">3 offset 3</div>
-        <div class="col-span-3 col-offset-3">3 offset 3</div>
+        <div class="col col-lg-3 col-offset-3">3 offset 3</div>
+        <div class="col col-lg-3 col-offset-3">3 offset 3</div>
       </div><!-- /row -->
       <div class="row show-grid">
-        <div class="col-span-6 col-offset-3">6 offset 3</div>
+        <div class="col col-lg-6 col-offset-3">6 offset 3</div>
       </div><!-- /row -->
     </div>
 {% highlight html linenos %}
 <div class="row">
-  <div class="col-span-4">...</div>
-  <div class="col-span-4 col-offset-4">...</div>
+  <div class="col col-lg-4">...</div>
+  <div class="col col-lg-4 col-offset-4">...</div>
 </div>
 <div class="row">
-  <div class="col-span-3 col-offset-3">3 offset 3</div>
-  <div class="col-span-3 col-offset-3">3 offset 3</div>
+  <div class="col col-lg-3 col-offset-3">3 offset 3</div>
+  <div class="col col-lg-3 col-offset-3">3 offset 3</div>
 </div>
 <div class="row">
-  <div class="col-span-6 col-offset-3">...</div>
+  <div class="col col-lg-6 col-offset-3">...</div>
 </div>
 {% endhighlight %}
 
@@ -420,13 +420,13 @@ title: Bootstrap Documentation
     <h3 id="grid-nesting">Nesting columns</h3>
     <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-span-*</code> columns within an existing <code>.col-span-*</code> column. Nested rows should include a set of columns that add up to 12.</p>
     <div class="row show-grid">
-      <div class="col-span-9">
+      <div class="col col-lg-9">
         Level 1: 9 columns
         <div class="row show-grid">
-          <div class="col-span-6">
+          <div class="col col-lg-6">
             Level 2: 6 columns
           </div>
-          <div class="col-span-6">
+          <div class="col col-lg-6">
             Level 2: 6 columns
           </div>
         </div>
@@ -434,13 +434,13 @@ title: Bootstrap Documentation
     </div>
 {% highlight html linenos %}
 <div class="row">
-  <div class="col-span-9">
+  <div class="col col-lg-9">
     Level 1: 9 columns
     <div class="row">
-      <div class="col-span-6">
+      <div class="col col-lg-6">
         Level 2: 6 columns
       </div>
-      <div class="col-span-6">
+      <div class="col col-lg-6">
         Level 2: 6 columns
       </div>
     </div>
@@ -451,29 +451,29 @@ title: Bootstrap Documentation
     <h3 id="grid-column-ordering">Column ordering</h3>
     <p>Easily change the order of our built-in grid columns with <code>.col-push-*</code> and <code>.col-pull-*</code> modifier classes.</p>
     <div class="row show-grid">
-      <div class="col-span-9 col-push-3">9</div>
-      <div class="col-span-3 col-pull-9">3</div>
+      <div class="col col-lg-9 col-push-3">9</div>
+      <div class="col col-lg-3 col-pull-9">3</div>
     </div>
 
 {% highlight html linenos %}
 <div class="row show-grid">
-  <div class="col-span-9 col-push-3">9</div>
-  <div class="col-span-3 col-pull-9">3</div>
+  <div class="col col-lg-9 col-push-3">9</div>
+  <div class="col col-lg-3 col-pull-9">3</div>
 </div>
 {% endhighlight %}
 
     <h3 id="grid-small">Small device grid</h3>
-    <p>Use the small device grid classes, like <code>.col-small-span-6</code>, to create columned layouts on phone and tablet devices (anything under 768px). Offsets, pushes, and pulls are not available with the small grid at this time.</p>
+    <p>Use the small device grid classes, like <code>.col-sm-6</code>, to create columned layouts on phone and tablet devices (anything under 768px). Offsets, pushes, and pulls are not available with the small grid at this time.</p>
     <div class="row show-grid">
-      <div class="col-span-4 col-small-span-6">4 cols, 6 small cols</div>
-      <div class="col-span-4 col-small-span-6">4 cols, 6 small cols</div>
-      <div class="col-span-4 col-small-span-12">4 cols, 12 small cols</div>
+      <div class="col col-lg-4 col-sm-6">4 cols, 6 small cols</div>
+      <div class="col col-lg-4 col-sm-6">4 cols, 6 small cols</div>
+      <div class="col col-lg-4 col-sm-12">4 cols, 12 small cols</div>
     </div>
 {% highlight html linenos %}
 <div class="row">
-  <div class="col-span-4 col-small-span-6">4 cols, 6 small cols</div>
-  <div class="col-span-4 col-small-span-6">4 cols, 6 small cols</div>
-  <div class="col-span-4 col-small-span-12">4 cols, 12 small cols</div>
+  <div class="col col-lg-4 col-sm-6">4 cols, 6 small cols</div>
+  <div class="col col-lg-4 col-sm-6">4 cols, 6 small cols</div>
+  <div class="col col-lg-4 col-sm-12">4 cols, 12 small cols</div>
 </div>
 {% endhighlight %}
 
@@ -1186,8 +1186,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <p>Use contextual classes to color table rows.</p>
     <table class="table table-bordered table-striped">
       <colgroup>
-        <col class="col-span-1">
-        <col class="col-span-7">
+        <col class="col col-lg-1">
+        <col class="col col-lg-7">
       </colgroup>
       <thead>
         <tr>
@@ -1316,8 +1316,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <h3 id="forms-inline">Inline form</h3>
     <p>Add <code>.form-inline</code> for left-aligned labels and inline-block controls for a compact layout.</p>
     <form class="bs-docs-example form-inline">
-      <input type="text" class="col-span-3" placeholder="Email">
-      <input type="password" class="col-span-3" placeholder="Password">
+      <input type="text" class="col col-lg-3" placeholder="Email">
+      <input type="password" class="col col-lg-3" placeholder="Password">
       <div class="checkbox">
         <label>
           <input type="checkbox"> Remember me
@@ -1327,8 +1327,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     </form><!-- /example -->
 {% highlight html linenos %}
 <form class="form-inline">
-  <input type="text" class="col-span-3" placeholder="Email">
-  <input type="password" class="col-span-3" placeholder="Password">
+  <input type="text" class="col col-lg-3" placeholder="Email">
+  <input type="password" class="col col-lg-3" placeholder="Password">
   <div class="checkbox">
     <label>
       <input type="checkbox"> Remember me
@@ -1548,10 +1548,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     </div>
 
     <form class="bs-docs-example form-inline">
-      <input class="col-span-3" type="email" placeholder="[email protected]" required>
+      <input class="col col-lg-3" type="email" placeholder="[email protected]" required>
     </form>
 {% highlight html linenos %}
-<input class="col-span-3" type="email" placeholder="[email protected]" required>
+<input class="col col-lg-3" type="email" placeholder="[email protected]" required>
 {% endhighlight %}
 
     <h3 id="forms-disabled-inputs">Disabled inputs</h3>
@@ -1579,10 +1579,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <form class="bs-docs-example form-inline">
       <fieldset disabled>
         <div>
-          <input type="text" class="col-span-4" placeholder="Disabled input">
+          <input type="text" class="col col-lg-4" placeholder="Disabled input">
         </div>
         <div>
-          <select class="col-span-4">
+          <select class="col col-lg-4">
             <option>Disabled select</option>
           </select>
         </div>
@@ -1598,10 +1598,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 <form class="form-inline">
   <fieldset disabled>
     <div>
-      <input type="text" class="col-span-4" placeholder="Disabled input">
+      <input type="text" class="col col-lg-4" placeholder="Disabled input">
     </div>
     <div>
-      <select class="col-span-4">
+      <select class="col col-lg-4">
         <option>Disabled select</option>
       </select>
     </div>
@@ -1678,34 +1678,34 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     </div>
 
     <form class="bs-docs-example">
-      <div class="input-group col-span-9">
+      <div class="input-group col col-lg-9">
         <span class="input-group-addon">@</span>
         <input type="text" placeholder="Username">
       </div>
       <br>
-      <div class="input-group col-span-6">
+      <div class="input-group col col-lg-6">
         <input type="text">
         <span class="input-group-addon">.00</span>
       </div>
       <br>
-      <div class="input-group col-span-3">
+      <div class="input-group col col-lg-3">
         <span class="input-group-addon">$</span>
         <input type="text">
         <span class="input-group-addon">.00</span>
       </div>
     </form>
 {% highlight html linenos %}
-<div class="input-group col-span-9">
+<div class="input-group col col-lg-9">
   <span class="input-group-addon">@</span>
   <input type="text" placeholder="Username">
 </div>
 
-<div class="input-group col-span-6">
+<div class="input-group col col-lg-6">
   <input type="text">
   <span class="input-group-addon">.00</span>
 </div>
 
-<div class="input-group col-span-3">
+<div class="input-group col col-lg-3">
   <span class="input-group-addon">$</span>
   <input type="text">
   <span class="input-group-addon">.00</span>
@@ -1715,33 +1715,33 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <h4>Optional sizes</h4>
     <p>Add the relative form sizing classes to the `.input-group-addon`.</p>
     <form class="bs-docs-example">
-      <div class="input-group col-span-9">
+      <div class="input-group col col-lg-9">
         <span class="input-group-addon input-large">@</span>
         <input type="text" class="input-large" placeholder="Username">
       </div>
       <br>
-      <div class="input-group col-span-9">
+      <div class="input-group col col-lg-9">
         <span class="input-group-addon">@</span>
         <input type="text" placeholder="Username">
       </div>
       <br>
-      <div class="input-group col-span-9">
+      <div class="input-group col col-lg-9">
         <span class="input-group-addon input-small">@</span>
         <input type="text" class="input-small" placeholder="Username">
       </div>
     </form>
 {% highlight html linenos %}
-<div class="input-group col-span-9">
+<div class="input-group col col-lg-9">
   <span class="input-group-addon input-large">@</span>
   <input type="text" class="input-large" placeholder="Username">
 </div>
 
-<div class="input-group col-span-9">
+<div class="input-group col col-lg-9">
   <span class="input-group-addon">@</span>
   <input type="text" placeholder="Username">
 </div>
 
-<div class="input-group col-span-9">
+<div class="input-group col col-lg-9">
   <span class="input-group-addon input-small">@</span>
   <input type="text" class="input-small" placeholder="Username">
 </div>
@@ -1750,14 +1750,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <h4>Buttons instead of text</h4>
     <p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
     <form class="bs-docs-example">
-      <div class="input-group col-span-7">
+      <div class="input-group col col-lg-7">
         <span class="input-group-btn">
           <button class="btn" type="button">Go!</button>
         </span>
         <input type="text">
       </div>
       <br>
-      <div class="input-group col-span-7">
+      <div class="input-group col col-lg-7">
         <input type="text">
         <span class="input-group-btn">
           <button class="btn" type="button">Go!</button>
@@ -1765,14 +1765,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       </div>
     </form>
 {% highlight html linenos %}
-<div class="input-group col-span-7">
+<div class="input-group col col-lg-7">
   <span class="input-group-btn">
     <button class="btn" type="button">Go!</button>
   </span>
   <input type="text">
 </div>
 
-<div class="input-group col-span-7">
+<div class="input-group col col-lg-7">
   <input type="text">
   <span class="input-group-btn">
     <button class="btn" type="button">Go!</button>
@@ -1783,7 +1783,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <h4>Button dropdowns</h4>
     <p></p>
     <form class="bs-docs-example">
-      <div class="input-group col-span-7">
+      <div class="input-group col col-lg-7">
         <div class="input-group-btn">
           <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
           <ul class="dropdown-menu">
@@ -1797,7 +1797,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         <input type="text">
       </div><!-- /input-group -->
       <br>
-      <div class="input-group col-span-7">
+      <div class="input-group col col-lg-7">
         <input type="text">
         <div class="input-group-btn">
           <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
@@ -1812,7 +1812,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       </div><!-- /input-group -->
     </form>
 {% highlight html linenos %}
-<div class="input-group col-span-7">
+<div class="input-group col col-lg-7">
   <div class="input-group-btn">
     <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
     <ul class="dropdown-menu">
@@ -1826,7 +1826,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
   <input type="text">
 </div><!-- /input-group -->
 
-<div class="input-group col-span-7">
+<div class="input-group col col-lg-7">
   <input type="text">
   <div class="input-group-btn">
     <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
@@ -1843,7 +1843,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
     <h4>Segmented dropdown groups</h4>
     <form class="bs-docs-example">
-      <div class="input-group col-span-7">
+      <div class="input-group col col-lg-7">
         <div class="input-group-btn">
           <button class="btn" tabindex="-1">Action</button>
           <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
@@ -1862,7 +1862,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
       <br>
 
-      <div class="input-group col-span-7">
+      <div class="input-group col col-lg-7">
         <input type="text">
         <div class="input-group-btn">
           <button class="btn" tabindex="-1">Action</button>
@@ -1880,14 +1880,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       </div>
     </form>
 {% highlight html linenos %}
-<div class="input-group col-span-7">
+<div class="input-group col col-lg-7">
   <div class="input-group-btn">
     <!-- Button and dropdown menu -->
   </div>
   <input type="text">
 </div>
 
-<div class="input-group col-span-7">
+<div class="input-group col col-lg-7">
   <input type="text">
   <div class="input-group-btn btn-group">
     <!-- Button and dropdown menu -->
@@ -1914,27 +1914,27 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
     <h4>Column sizing</h4>
-    <p>Use <code>.col-span-1</code> to <code>.col-span-12</code> for setting widths on inputs that match Bootstrap's grid system.</p>
+    <p>Use <code>.col col-lg-1</code> to <code>.col col-lg-12</code> for setting widths on inputs that match Bootstrap's grid system.</p>
     <form class="bs-docs-example" style="padding-bottom: 15px;">
       <div class="controls docs-input-sizes">
-        <input class="col-span-1" type="text" placeholder=".col-span-1">
-        <input class="col-span-2" type="text" placeholder=".col-span-2">
-        <input class="col-span-3" type="text" placeholder=".col-span-3">
-        <select class="col-span-1">
+        <input class="col col-lg-1" type="text" placeholder=".col col-lg-1">
+        <input class="col col-lg-2" type="text" placeholder=".col col-lg-2">
+        <input class="col col-lg-3" type="text" placeholder=".col col-lg-3">
+        <select class="col col-lg-1">
           <option>1</option>
           <option>2</option>
           <option>3</option>
           <option>4</option>
           <option>5</option>
         </select>
-        <select class="col-span-2">
+        <select class="col col-lg-2">
           <option>1</option>
           <option>2</option>
           <option>3</option>
           <option>4</option>
           <option>5</option>
         </select>
-        <select class="col-span-3">
+        <select class="col col-lg-3">
           <option>1</option>
           <option>2</option>
           <option>3</option>
@@ -1944,16 +1944,16 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       </div>
     </form>
 {% highlight html linenos %}
-<input class="col-span-1" type="text" placeholder=".col-span-1">
-<input class="col-span-2" type="text" placeholder=".col-span-2">
-<input class="col-span-3" type="text" placeholder=".col-span-3">
-<select class="col-span-1">
+<input class="col col-lg-1" type="text" placeholder=".col col-lg-1">
+<input class="col col-lg-2" type="text" placeholder=".col col-lg-2">
+<input class="col col-lg-3" type="text" placeholder=".col col-lg-3">
+<select class="col col-lg-1">
   ...
 </select>
-<select class="col-span-2">
+<select class="col col-lg-2">
   ...
 </select>
-<select class="col-span-3">
+<select class="col col-lg-3">
   ...
 </select>
 {% endhighlight %}
@@ -1961,27 +1961,27 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <p>If you need multiple inputs on the same line, wrap them in the standard grid markup (with <code>.row</code> and <code>.col-span-*</code> classes). Each input should have it's own column and will expand to fill the available width automatically.</p>
     <form class="bs-docs-example" style="padding-bottom: 15px;">
       <div class="row">
-        <div class="col-span-4">
-          <input type="text" placeholder=".col-span-4">
+        <div class="col col-lg-4">
+          <input type="text" placeholder=".col col-lg-4">
         </div>
-        <div class="col-span-4">
-          <input type="text" placeholder=".col-span-4">
+        <div class="col col-lg-4">
+          <input type="text" placeholder=".col col-lg-4">
         </div>
-        <div class="col-span-4">
-          <input type="text" placeholder=".col-span-4">
+        <div class="col col-lg-4">
+          <input type="text" placeholder=".col col-lg-4">
         </div>
       </div>
     </form>
 {% highlight html linenos %}
 <div class="row">
-  <div class="col-span-4">
-    <input type="text" placeholder=".col-span-4">
+  <div class="col col-lg-4">
+    <input type="text" placeholder=".col col-lg-4">
   </div>
-  <div class="col-span-4">
-    <input type="text" placeholder=".col-span-4">
+  <div class="col col-lg-4">
+    <input type="text" placeholder=".col col-lg-4">
   </div>
-  <div class="col-span-4">
-    <input type="text" placeholder=".col-span-4">
+  <div class="col col-lg-4">
+    <input type="text" placeholder=".col col-lg-4">
   </div>
 </div>
 {% endhighlight %}
@@ -2679,7 +2679,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         <div class="controls">
           <div class="input-group">
             <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
-            <input class="col-span-2" id="inputIcon" type="text">
+            <input class="col col-lg-2" id="inputIcon" type="text">
           </div>
         </div>
       </div>
@@ -2690,7 +2690,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
   <div class="controls">
     <div class="input-group">
       <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
-      <input class="col-span-2" id="inputIcon" type="text">
+      <input class="col col-lg-2" id="inputIcon" type="text">
     </div>
   </div>
 </div>
@@ -3626,7 +3626,7 @@ body {
               </li>
             </ul>
             <form class="navbar-form pull-left" action="">
-              <input type="text" class="col-span-8" placeholder="Search">
+              <input type="text" class="col col-lg-8" placeholder="Search">
             </form>
             <ul class="nav navbar-nav pull-right">
               <li><a href="#">Link</a></li>
@@ -3703,7 +3703,7 @@ body {
               </li>
             </ul>
             <form class="navbar-form pull-left" action="">
-              <input type="text" class="col-span-8" placeholder="Search">
+              <input type="text" class="col col-lg-8" placeholder="Search">
             </form>
             <ul class="nav navbar-nav pull-right">
               <li><a href="#">Link</a></li>
@@ -4093,22 +4093,22 @@ body {
     <p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>
     <div class="bs-docs-example">
       <div class="row">
-        <div class="col-span-3">
+        <div class="col col-lg-3">
           <a href="#" class="thumbnail">
             <img data-src="holder.js/260x180" alt="">
           </a>
         </div>
-        <div class="col-span-3">
+        <div class="col col-lg-3">
           <a href="#" class="thumbnail">
             <img data-src="holder.js/260x180" alt="">
           </a>
         </div>
-        <div class="col-span-3">
+        <div class="col col-lg-3">
           <a href="#" class="thumbnail">
             <img data-src="holder.js/260x180" alt="">
           </a>
         </div>
-        <div class="col-span-3">
+        <div class="col col-lg-3">
           <a href="#" class="thumbnail">
             <img data-src="holder.js/260x180" alt="">
           </a>
@@ -4117,7 +4117,7 @@ body {
     </div><!-- /.bs-docs-example -->
 {% highlight html linenos %}
 <div class="row">
-  <div class="col-span-3">
+  <div class="col col-lg-3">
     <a href="#" class="thumbnail">
       <img data-src="holder.js/260x180" alt="">
     </a>
@@ -4130,7 +4130,7 @@ body {
     <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-docs-example">
       <div class="row">
-        <div class="col-span-4">
+        <div class="col col-lg-4">
           <div class="thumbnail">
             <img data-src="holder.js/300x200" alt="">
             <div class="caption">
@@ -4140,7 +4140,7 @@ body {
             </div>
           </div>
         </div>
-        <div class="col-span-4">
+        <div class="col col-lg-4">
           <div class="thumbnail">
             <img data-src="holder.js/300x200" alt="">
             <div class="caption">
@@ -4150,7 +4150,7 @@ body {
             </div>
           </div>
         </div>
-        <div class="col-span-4">
+        <div class="col col-lg-4">
           <div class="thumbnail">
             <img data-src="holder.js/300x200" alt="">
             <div class="caption">
@@ -4164,7 +4164,7 @@ body {
     </div><!-- /.bs-docs-example -->
 {% highlight html linenos %}
 <div class="row">
-  <div class="col-span-3">
+  <div class="col col-lg-3">
     <div class="thumbnail">
       <img data-src="holder.js/300x200" alt="">
       <div class="caption">
@@ -6520,7 +6520,7 @@ $('.carousel').carousel({
             <h2>Example</h2>
             <p>A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.</p>
             <div class="bs-docs-example" style="background-color: #f5f5f5;">
-              <input type="text" class="col-span-3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source='["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]'>
+              <input type="text" class="col col-lg-3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source='["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]'>
             </div><!-- /example -->
 {% highlight html linenos %}
 <input type="text" data-provide="typeahead">
diff --git a/less/grid.less b/less/grid.less
index 3ac727bc7..70c304968 100644
--- a/less/grid.less
+++ b/less/grid.less
@@ -12,29 +12,35 @@
 .row {
   .make-row();
 }
-[class*="col-span-"],
-[class*="col-small-"] {
+
+
+// Common styles for small and large grid columns
+.col {
   position: relative;
+  // Float and set width: 100%; for easy stacking on mobile devices
+  float: left;
+  width: 100%;
+  // Prevent columns from collapsing when empty
   min-height: 1px;
+  // Inner gutter via padding
   padding-left:  (@grid-gutter-width / 2);
   padding-right: (@grid-gutter-width / 2);
 }
 
-[class*="col-small-"] {
-  float: left;
+// Generate small grid classes first
+.generate-grid-columns(@grid-columns);
+
+// Then generate the larger grid classes via media query
+@media screen and (min-width: 768px) {
+  .generate-large-grid-columns(@grid-columns);
 }
-.generate-small-grid-columns(@grid-columns);
+
 
 // Responsive: Tablets and up
 @media screen and (min-width: @screen-tablet) {
   .container {
     max-width: 728px;
   }
-  // Generate the grid columns and offsets
-  [class*="col-span-"] {
-    float: left;
-  }
-  .generate-grid-columns(@grid-columns);
 }
 
 // Responsive: Desktops and up
@@ -52,6 +58,6 @@
 }
 
 // Reset utility classes due to specificity
-[class*="col-span-"].pull-right {
+/*[class*="col-span-"].pull-right {
   float: right;
-}
+}*/
diff --git a/less/mixins.less b/less/mixins.less
index f33b1ec6b..eb8775975 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -412,13 +412,12 @@
 // Generate the columns
 .make-column(@columns) {
   @media (min-width: @grid-float-breakpoint) {
-    float: left;
     // Calculate width based on number of columns available
     width: percentage((@columns / @grid-columns));
   }
   // Prevent columns from collapsing when empty
   min-height: 1px;
-  // Set inner padding as gutters instead of margin
+  // Inner gutter via padding
   padding-left:  (@grid-gutter-width / 2);
   padding-right: (@grid-gutter-width / 2);
 }
@@ -451,15 +450,40 @@
 
 
 
-// The Grid
+// Small grid columns
 .generate-grid-columns(@grid-columns) {
 
-  // Default columns
-  .col-span-X (@index) when (@index > 0) {
-    .col-span-@{index} { .col-span-(@index); }
-    .col-span-X((@index - 1));
+  .col-sm-X (@index) when (@index > 0) {
+    .col-sm-@{index} { .col-sm-(@index); }
+    .col-sm-X((@index - 1));
+  }
+  .col-sm-X (0) {}
+
+  // Generate columns
+  .col-sm-X(@grid-columns);
+
+  // Apply the styles
+  .col-sm-(@columns) {
+    width: percentage((@columns / @grid-columns));
+  }
+}
+
+// Large grid columns
+.generate-large-grid-columns(@grid-columns) {
+
+  .col-lg-X (@index) when (@index > 0) {
+    .col-lg-@{index} { .col-lg-(@index); }
+    .col-lg-X((@index - 1));
+  }
+  .col-lg-X (0) {}
+
+  // Generate the columns
+  .col-lg-X(@grid-columns);
+
+  // Apply the styles
+  .col-lg-(@columns) {
+    width: percentage((@columns / @grid-columns));
   }
-  .col-span-X(0) {}
 
   // Offsets (gaps between columns)
   .col-offset-X (@index) when (@index > 0) {
@@ -483,9 +507,6 @@
   .col-pull-X (0) {}
 
   // Apply the styles
-  .col-span-(@columns) {
-    width: percentage((@columns / @grid-columns));
-  }
   .col-offset-(@columns) {
     margin-left: percentage((@columns / @grid-columns));
   }
@@ -497,30 +518,11 @@
   }
 
   // Generate .spanX and .offsetX
-  .col-span-X(@grid-columns);
   .col-offset-X(@grid-columns);
   .col-push-X(@grid-columns);
   .col-pull-X(@grid-columns);
 }
 
-// Small device grid
-.generate-small-grid-columns(@grid-columns) {
-
-  // Deterimine the classes
-  .col-small-span-X (@index) when (@index > 0) {
-    .col-small-span-@{index} { .col-small-span-(@index); }
-    .col-small-span-X((@index - 1));
-  }
-  .col-small-span-X(0) {}
-
-  // Specify widths
-  .col-small-span-(@columns) {
-    width: percentage((@columns / @grid-columns));
-  }
-
-  // Generate the CSS
-  .col-small-span-X(@grid-columns);
-}
 
 
 // Framework mixins