From 49ebf542a29216c55d48306b58bd232506d67154 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sat, 30 Mar 2013 00:19:05 -0700
Subject: [PATCH] reorder docs

---
 docs/_includes/docs-nav.html |   5 +-
 docs/docs.html               | 338 ++++++++++++++++++-----------------
 2 files changed, 176 insertions(+), 167 deletions(-)

diff --git a/docs/_includes/docs-nav.html b/docs/_includes/docs-nav.html
index 3ad2bbd48b..78a26ffb23 100644
--- a/docs/_includes/docs-nav.html
+++ b/docs/_includes/docs-nav.html
@@ -68,10 +68,11 @@
       </ul>
     </li>
     <li><a href="#images">Images</a></li>
+    <li><a href="#helper-classes">Helper classes</a></li>
+    <li><a href="#responsive-utilities">Responsive utilities</a></li>
 
     <li><a class="nav-header" href="#components">Components</a></li>
     <li><a href="#icons">Glyphicons</a></li>
-    <li><a href="#responsive-utilities">Responsive utilities</a></li>
     <li><a href="#dropdowns">Dropdowns</a></li>
     <li><a href="#buttonGroups">Button groups</a></li>
     <li><a href="#buttonDropdowns">Button dropdowns</a></li>
@@ -86,7 +87,7 @@
     <li><a href="#alerts">Alerts</a></li>
     <li><a href="#progress">Progress bars</a></li>
     <li><a href="#media">Media object</a></li>
-    <li><a href="#misc">Misc</a></li>
+    <li><a href="#wells">Wells</a></li>
 
     <li><a class="nav-header" href="#js">JavaScript</a></li>
     <li><a href="#js-overview">Overview</a></li>
diff --git a/docs/docs.html b/docs/docs.html
index f243c39de9..1c3b2d4340 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -2070,6 +2070,174 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         </div>
 
 
+        <!-- Helpers
+        ================================================== -->
+        <div class="bs-docs-section" id="helper-classes">
+          <div class="page-header">
+            <h1>Helper classes</h1>
+          </div>
+
+          <h3>Close icon</h3>
+          <p>Use the generic close icon for dismissing content like modals and alerts.</p>
+          <div class="bs-docs-example">
+            <p><button class="close" style="float: none;">&times;</button></p>
+          </div>
+{% highlight html linenos %}
+<button class="close" style="float: none;">&times;</button>
+{% endhighlight %}
+
+          <h3>.pull-left</h3>
+          <p>Float an element left</p>
+{% highlight html linenos %}
+<div class="pull-left">...</div>
+{% endhighlight %}
+{% highlight css linenos %}
+.pull-left {
+  float: left;
+}
+{% endhighlight %}
+
+          <h3>.pull-right</h3>
+          <p>Float an element right</p>
+{% highlight html linenos %}
+<div class="pull-right">...</div>
+{% endhighlight %}
+{% highlight css linenos %}
+.pull-right {
+  float: right;
+}
+{% endhighlight %}
+
+          <h3>.clearfix</h3>
+          <p>Clear the <code>float</code> on any element. Utilizes <a href="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher.</p>
+{% highlight html linenos %}
+<div class="clearfix">...</div>
+{% endhighlight %}
+{% highlight css linenos %}
+// Mixin
+.clearfix {
+  &:before,
+  &:after {
+    content: " ";
+    display: table;
+  }
+  &:after {
+    clear: both;
+  }
+}
+
+// Usage
+.element {
+  .clearfix();
+}
+{% endhighlight %}
+        </div>
+
+
+        <!-- Responsive utilities
+        ================================================== -->
+        <div class="bs-docs-section" id="responsive-utilities">
+          <div class="page-header">
+            <h1>Responsive utilities</h1>
+          </div>
+          <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">
+            <thead>
+              <tr>
+                <th>Class</th>
+                <th>Phones <small>767px and below</small></th>
+                <th>Tablets <small>979px to 768px</small></th>
+                <th>Desktops <small>Default</small></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <th><code>.visible-phone</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>
+                <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>
+                <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>
+                <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>
+                <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>
+                <td class="is-visible">Visible</td>
+                <td class="is-visible">Visible</td>
+                <td class="is-hidden">Hidden</td>
+              </tr>
+            </tbody>
+          </table>
+
+          <h3>Print classes</h3>
+          <table class="table table-bordered table-striped responsive-utilities">
+            <thead>
+              <tr>
+                <th>Class</th>
+                <th>Browser</th>
+                <th>Print</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <th><code>.visible-print</code></th>
+                <td class="is-hidden">Hidden</td>
+                <td class="is-visible">Visible</td>
+              </tr>
+              <tr>
+                <th><code>.hidden-print</code></th>
+                <td class="is-visible">Visible</td>
+                <td class="is-hidden">Hidden</td>
+              </tr>
+            </tbody>
+          </table>
+
+          <h3>When to use</h3>
+          <p>Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities should not be used with tables, and as such are not supported.</p>
+
+          <h3>Test case</h3>
+          <p>Resize your browser or load on different devices to test the above classes.</p>
+          <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>
+          </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>
+          </ul>
+
+        </div>
+
+
 
 
 
@@ -2388,112 +2556,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
 
 
-        <!-- Responsive design
-        ================================================== -->
-        <section id="responsive-utilities">
-          <div class="page-header">
-            <h1>Responsive utilities</h1>
-          </div>
-          <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">
-            <thead>
-              <tr>
-                <th>Class</th>
-                <th>Phones <small>767px and below</small></th>
-                <th>Tablets <small>979px to 768px</small></th>
-                <th>Desktops <small>Default</small></th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <th><code>.visible-phone</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>
-                <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>
-                <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>
-                <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>
-                <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>
-                <td class="is-visible">Visible</td>
-                <td class="is-visible">Visible</td>
-                <td class="is-hidden">Hidden</td>
-              </tr>
-            </tbody>
-          </table>
-
-          <h3>Print classes</h3>
-          <table class="table table-bordered table-striped responsive-utilities">
-            <thead>
-              <tr>
-                <th>Class</th>
-                <th>Browser</th>
-                <th>Print</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <th><code>.visible-print</code></th>
-                <td class="is-hidden">Hidden</td>
-                <td class="is-visible">Visible</td>
-              </tr>
-              <tr>
-                <th><code>.hidden-print</code></th>
-                <td class="is-visible">Visible</td>
-                <td class="is-hidden">Hidden</td>
-              </tr>
-            </tbody>
-          </table>
-
-          <h3>When to use</h3>
-          <p>Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities should not be used with tables, and as such are not supported.</p>
-
-          <h3>Test case</h3>
-          <p>Resize your browser or load on different devices to test the above classes.</p>
-          <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>
-          </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>
-          </ul>
-
-        </section>
-
-
-
-
 
         <!-- Dropdowns
         ================================================== -->
@@ -4317,14 +4379,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
 
 
-        <!-- Miscellaneous
+        <!-- Wells
         ================================================== -->
-        <section id="misc">
+        <div id="wells">
           <div class="page-header">
-            <h1>Miscellaneous <small>Lightweight utility components</small></h1>
+            <h1>Wells</h1>
           </div>
 
-          <h2>Wells</h2>
+          <h3>Default well</h3>
           <p>Use the well as a simple effect on an element to give it an inset effect.</p>
           <div class="bs-docs-example">
             <div class="well">
@@ -4354,61 +4416,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 <div class="well well-small">...</div>
 {% endhighlight %}
 
-
-          <h2>Close icon</h2>
-          <p>Use the generic close icon for dismissing content like modals and alerts.</p>
-          <div class="bs-docs-example">
-            <p><button class="close" style="float: none;">&times;</button></p>
-          </div>
-{% highlight html linenos %}
-<button class="close" style="float: none;">&times;</button>
-{% endhighlight %}
-
-          <h2>Helper classes</h2>
-          <p>Simple, focused classes for small display or behavior tweaks.</p>
-
-          <h4>.pull-left</h4>
-          <p>Float an element left</p>
-{% highlight html linenos %}
-<div class="pull-left">...</div>
-{% endhighlight %}
-{% highlight css linenos %}
-.pull-left {
-  float: left;
-}
-{% endhighlight %}
-
-          <h4>.pull-right</h4>
-          <p>Float an element right</p>
-{% highlight html linenos %}
-<div class="pull-right">...</div>
-{% endhighlight %}
-{% highlight css linenos %}
-.pull-right {
-  float: right;
-}
-{% endhighlight %}
-
-          <h4>.clearfix</h4>
-          <p>Clear the <code>float</code> on any element. Utilizes <a href="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher.</p>
-{% highlight html linenos %}
-<div class="clearfix">...</div>
-{% endhighlight %}
-{% highlight css linenos %}
-.clearfix {
-  &:before,
-  &:after {
-    content: " ";
-    display: table;
-  }
-  &:after {
-    clear: both;
-  }
-}
-{% endhighlight %}
-
-
-        </section>
+        </div>