rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

use flexbox order property to change order of content for screenreaders

Browse Source
This commit is contained in:
Mark Otto 2017-06-17 10:28:19 -07:00 committed by Mark Otto
parent 2fb65c2b61
commit 2a579e546c
3 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
_layouts/docs.html
View File

@ -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>

2
assets/scss/_content.scss
View File

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

2
assets/scss/_sidebar.scss
View File

@ -10,6 +10,7 @@
top: 4rem;
max-height: calc(100vh - 4rem);
}
order: 2;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
overflow-x: visible;
@ -49,6 +50,7 @@
//
.bd-sidebar {
order: 0;
background-color: #f5f2f9;
border-bottom: 1px solid rgba(0,0,0,.1);