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

}