rearrange hero unit section

3 files changed, 20 insertions, 27 deletions

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 4d65f6b04..fc9df07e2 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -742,7 +742,8 @@ form.well {
 .bs-docs-example .table,
 .bs-docs-example .progress,
 .bs-docs-example .well,
-.bs-docs-example .alert {
+.bs-docs-example .alert,
+.bs-docs-example .hero-unit {
   margin-bottom: 5px;
 }
 form.bs-docs-example {
diff --git a/docs/components.html b/docs/components.html
index 312e03c20..5fae8d4b5 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1398,11 +1398,16 @@
   <div class="page-header">
     <h1>Typographic components <small>Page header and hero unit for segmenting content</small></h1>
   </div>
-  <h2>Hero unit</h2>
 
-  <p>Bootstrap provides a lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.</p>
-  <h3>Markup</h3>
-  <p>Wrap your content in a <code>div</code> like so:</p>
+  <h2>Hero unit</h2>
+  <p>A lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.</p>
+  <div class="bs-docs-example">
+    <div class="hero-unit">
+      <h1>Hello, world!</h1>
+      <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
+      <p><a class="btn btn-primary btn-large">Learn more</a></p>
+    </div>
+  </div>
 <pre class="prettyprint linenums">
 &lt;div class="hero-unit"&gt;
   &lt;h1&gt;Heading&lt;/h1&gt;
@@ -1415,16 +1420,7 @@
 &lt;/div&gt;
 </pre>
 
-  <div class="bs-docs-example">
-    <div class="hero-unit">
-      <h1>Hello, world!</h1>
-      <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
-      <p><a class="btn btn-primary btn-large">Learn more</a></p>
-    </div>
-  </div>
-
   <h2>Page header</h2>
-
   <p>A simple shell for an <code>h1</code> to appropriately space out and segment sections of content on a page. It can utilize the <code>h1</code>'s default <code>small</code>, element as well most other components (with additional styles).</p>
   <div class="bs-docs-example">
     <div class="page-header">
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index c90b2997e..aa1032c06 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -1321,11 +1321,16 @@
   <div class="page-header">
     <h1>{{_i}}Typographic components{{/i}} <small>{{_i}}Page header and hero unit for segmenting content{{/i}}</small></h1>
   </div>
-  <h2>{{_i}}Hero unit{{/i}}</h2>
 
-  <p>{{_i}}Bootstrap provides a lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.{{/i}}</p>
-  <h3>{{_i}}Markup{{/i}}</h3>
-  <p>{{_i}}Wrap your content in a <code>div</code> like so:{{/i}}</p>
+  <h2>{{_i}}Hero unit{{/i}}</h2>
+  <p>{{_i}}A lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.{{/i}}</p>
+  <div class="bs-docs-example">
+    <div class="hero-unit">
+      <h1>{{_i}}Hello, world!{{/i}}</h1>
+      <p>{{_i}}This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.{{/i}}</p>
+      <p><a class="btn btn-primary btn-large">{{_i}}Learn more{{/i}}</a></p>
+    </div>
+  </div>
 <pre class="prettyprint linenums">
 &lt;div class="hero-unit"&gt;
   &lt;h1&gt;{{_i}}Heading{{/i}}&lt;/h1&gt;
@@ -1338,16 +1343,7 @@
 &lt;/div&gt;
 </pre>
 
-  <div class="bs-docs-example">
-    <div class="hero-unit">
-      <h1>{{_i}}Hello, world!{{/i}}</h1>
-      <p>{{_i}}This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.{{/i}}</p>
-      <p><a class="btn btn-primary btn-large">{{_i}}Learn more{{/i}}</a></p>
-    </div>
-  </div>
-
   <h2>{{_i}}Page header{{/i}}</h2>
-
   <p>{{_i}}A simple shell for an <code>h1</code> to appropriately space out and segment sections of content on a page. It can utilize the <code>h1</code>'s default <code>small</code>, element as well most other components (with additional styles).{{/i}}</p>
   <div class="bs-docs-example">
     <div class="page-header">