Hopiu/bootstrap
1
0
Fork 0
mirror of https://github.com/Hopiu/bootstrap.git synced 2026-05-27 20:34:00 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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"> <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
{% include docs-sidebar.html %} {% include docs-sidebar.html %}
</div> </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 %} {% if page.toc %}
<div class="d-none d-xl-block col-xl-2 bd-toc"> <div class="d-none d-xl-block col-xl-2 bd-toc">
{{ content | toc_only }} {{ content | toc_only }}
</div> </div>
{% endif %} {% 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>
</div> </div>

2
assets/scss/_content.scss
View file

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

2
assets/scss/_sidebar.scss
View file

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