reorder counters docs

docs/components.html

@@ -1252,16 +1252,22 @@
           <div class="page-header">
             <h1>Counters</h1>
           </div>
+          <p class="lead">Easily highlight new or unread items by adding a <code>&lt;span class="counter"&gt;</code> to links, Bootstrap navs, and more.</p>
 
-          <h3>Basic usage</h3>
-          <p>Counters are used to indicator unread or new items. Add a <code>&lt;span class="counter"&gt;</code> to links, Bootstrap navs, and more.</p>
           <div class="bs-docs-example">
-            <a href="#">Inbox</a> <span class="counter">42</span>
+            <a href="#">Inbox <span class="counter">42</span></a>
           </div>
 <pre class="prettyprint linenums">
-&lt;a href="#"&gt;Inbox&lt;/a&gt; &lt;span class="counter"&gt;42&lt;/span&gt;
+&lt;a href="#"&gt;
+  Inbox
+  &lt;span class="counter"&gt;42&lt;/span&gt;
+&lt;/a&gt;
 </pre>
 
+          <h4>Self collapsing</h4>
+          <p>When there are no new or unread items, counters will simply collapse (via CSS's <code>:empty</code> selector) provided no content exists within.</p>
+
+          <h4>Adapts to active nav states</h4>
           <p>Built-in styles are included for placing counters in active states in pill and list navigations.</p>
           <div class="bs-docs-example">
             <ul class="nav nav-pills">
@@ -1296,9 +1302,6 @@
 &lt;/ul&gt;
 </pre>
 
-          <h3>Easily collapsible</h3>
-          <p>For easy implementation, counters will simply collapse (via CSS's <code>:empty</code> selector) when no content exists within.</p>
-
         </section>
 
 

docs/templates/pages/components.mustache

@@ -1184,16 +1184,22 @@
           <div class="page-header">
             <h1>Counters</h1>
           </div>
+          <p class="lead">Easily highlight new or unread items by adding a <code>&lt;span class="counter"&gt;</code> to links, Bootstrap navs, and more.</p>
 
-          <h3>Basic usage</h3>
-          <p>Counters are used to indicator unread or new items. Add a <code>&lt;span class="counter"&gt;</code> to links, Bootstrap navs, and more.</p>
           <div class="bs-docs-example">
-            <a href="#">Inbox</a> <span class="counter">42</span>
+            <a href="#">Inbox <span class="counter">42</span></a>
           </div>
 <pre class="prettyprint linenums">
-&lt;a href="#"&gt;Inbox&lt;/a&gt; &lt;span class="counter"&gt;42&lt;/span&gt;
+&lt;a href="#"&gt;
+  Inbox
+  &lt;span class="counter"&gt;42&lt;/span&gt;
+&lt;/a&gt;
 </pre>
 
+          <h4>Self collapsing</h4>
+          <p>When there are no new or unread items, counters will simply collapse (via CSS's <code>:empty</code> selector) provided no content exists within.</p>
+
+          <h4>Adapts to active nav states</h4>
           <p>Built-in styles are included for placing counters in active states in pill and list navigations.</p>
           <div class="bs-docs-example">
             <ul class="nav nav-pills">
@@ -1228,9 +1234,6 @@
 &lt;/ul&gt;
 </pre>
 
-          <h3>Easily collapsible</h3>
-          <p>For easy implementation, counters will simply collapse (via CSS's <code>:empty</code> selector) when no content exists within.</p>
-
         </section>