// 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; } }