Move collapsing navbar after the toggle

It's unclear why the example currently has the content that's
shown/hidden BEFORE the toggle. Generally, this is not a recommended
content order, as after toggling, the newly shown content precedes the
toggle and requires keyboard users, and particularly assistive
technology users, to then navigate in reverse to reach it.

diff --git a/docs/components/navbar.md b/docs/components/navbar.md
index 5576091d373b6512595a206f66049c1cb153e91c..d18308d66fc6dadecbbf40770c5bfed52530c03a 100644 (file)
--- a/docs/components/navbar.md
+++ b/docs/components/navbar.md
@@ -240,16 +240,16 @@ Navbars can be statically placed (their default behavior), static without rounde
 Our collapse plugin allows you to use a `<button>` or `<a>` to toggle hidden content.
 
 {% example html %}
-<div class="collapse" id="exCollapsingNavbar">
-  <div class="bg-inverse p-a-1">
-    <h4>Collapsed content</h4>
-    <span class="text-muted">Toggleable via the navbar brand.</span>
-  </div>
-</div>
 <nav class="navbar navbar-light bg-faded">
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar" aria-controls="exCollapsingNavbar" aria-expanded="false" aria-label="Toggle navigation">
     &#9776;
   </button>
+  <div class="collapse" id="exCollapsingNavbar">
+    <div class="bg-inverse p-a-1">
+      <h4>Collapsed content</h4>
+      <span class="text-muted">Toggleable via the navbar brand.</span>
+    </div>
+  </div>
 </nav>
 {% endexample %}