Merge branch 'v4-dev' of https://github.com/twbs/bootstrap into v4-dev

Author: mdo

.scss-lint.yml

@@ -153,6 +153,7 @@ linters:
       - align-items
       - align-self
       - justify-content
+      - order
       - float
       - width
       - min-width

_includes/docs-navbar.html

@@ -1,5 +1,5 @@
 <header class="navbar navbar-inverse navbar-expand-md flex-column flex-md-row bd-navbar">
-  <a class="navbar-brand mr-0 mr-md-2" href="{{ site.baseurl }}/">
+  <a class="navbar-brand mr-0 mr-md-2" href="{{ site.baseurl }}/" aria-label="Bootstrap">
     {% include icons/bootstrap.svg width="36" height="36" class="d-block" %}
   </a>
 
@@ -43,17 +43,17 @@
     </li>
 
     <li class="nav-item">
-      <a class="nav-link p-2" href="{{ site.repo }}" target="_blank">
+      <a class="nav-link p-2" href="{{ site.repo }}" target="_blank" aria-label="GitHub">
         {% include icons/github.svg class="navbar-nav-svg" %}
       </a>
     </li>
     <li class="nav-item">
-      <a class="nav-link p-2" href="https://twitter.com/{{ site.twitter }}" target="_blank">
+      <a class="nav-link p-2" href="https://twitter.com/{{ site.twitter }}" target="_blank" aria-label="Twitter">
         {% include icons/twitter.svg class="navbar-nav-svg" %}
       </a>
     </li>
     <li class="nav-item">
-      <a class="nav-link p-2" href="{{ site.slack }}" target="_blank">
+      <a class="nav-link p-2" href="{{ site.slack }}" target="_blank" aria-label="Slack">
         {% include icons/slack.svg class="navbar-nav-svg" %}
       </a>
     </li>

_includes/icons/bootstrap.svg

@@ -17,18 +17,19 @@
         <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
           {% include docs-sidebar.html %}
         </div>
-        <main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
-          <h1 class="bd-title" id="content">{{ page.title }}</h1>
-          <p class="bd-lead">{{ page.description }}</p>
-          {% include ads.html %}
-          {{ content }}
-        </main>
 
         {% if page.toc %}
           <div class="d-none d-xl-block col-xl-2 bd-toc">
             {{ content | toc_only }}
           </div>
         {% endif %}
+
+        <main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
+          <h1 class="bd-title" id="content">{{ page.title }}</h1>
+          <p class="bd-lead">{{ page.description }}</p>
+          {% include ads.html %}
+          {{ content }}
+        </main>
       </div>
     </div>
 

_includes/icons/github.svg

@@ -5,6 +5,8 @@
 //
 
 .bd-content {
+  order: 1;
+
   // Hack the sticky header
   > h2[id],
   > h3[id],

_includes/icons/menu.svg

@@ -1,5 +1,3 @@
-// scss-lint:disable VendorPrefix
-
 //
 // Main navbar
 //
@@ -30,10 +28,11 @@
   }
 
   @include media-breakpoint-up(md) {
-    position: -webkit-sticky;
-    position: sticky;
-    top: 0;
-    z-index: 1071; // over everything in bootstrap
+    @supports (position: sticky) {
+      position: sticky;
+      top: 0;
+      z-index: 1071; // over everything in bootstrap
+    }
   }
 
   .navbar-nav {