// Flexbox positioning to move sidenav below main content on small screens .usa-layout-docs {
display: flex; flex-direction: column; @include media($large-screen) { display: inherit; } .usa-grid { > :first-child:not(.usa-width-*) { margin-top: 0; } > :last-child:not(.usa-width-*) { margin-bottom: 0; } }
}
.usa-layout-docs-sidenav {
order: 2;
}
.usa-layout-docs-main_content {
margin-bottom: $site-margins; order: 1; @include media($large-screen) { margin-bottom: 0; } > :first-child { margin-top: 0; }
}