add sidebar positioning classes when flowing as row

docs/content/components/layout.md

@@ -188,6 +188,27 @@ Add `Layout-divider--shallow` to change the divider on `sm` to be filled and 8px
 </div>
 ```
 
+### Sidebar positioning as rows
+
+- `Layout--sidebarPosition-flowRow-start` (default): when stacked, render the sidebar first
+- `Layout--sidebarPosition-flowRow-end`: when stacked, render the sidebar last
+- `Layout--sidebarPosition-flowRow-none`: when stacked, hide the sidebar
+
+```html live
+<div class="Layout Layout--sidebarPosition-flowRow-start">
+  <div class="Layout-main border">main</div>
+  <div class="Layout-sidebar border">sidebar</div>
+</div>
+<div class="Layout Layout--sidebarPosition-flowRow-end">
+  <div class="Layout-main border">main</div>
+  <div class="Layout-sidebar border">sidebar</div>
+</div>
+<div class="Layout Layout--sidebarPosition-flowRow-none">
+  <div class="Layout-main border">main</div>
+  <div class="Layout-sidebar border">sidebar</div>
+</div>
+```
+
 ### Layout stacking
 
 - Default: stacks when container is `sm`.

src/layout/mixins.scss

@@ -14,6 +14,32 @@
   &.Layout--divided {
     @include flow-as-row-divider;
   }
+
+  &.Layout--sidebarPosition-flowRow-start {
+    .Layout-sidebar {
+      grid-row: 1;
+    }
+
+    .Layout-main {
+      grid-row: 2 / span 2;
+    }
+  }
+
+  &.Layout--sidebarPosition-flowRow-end {
+    .Layout-sidebar {
+      grid-row: 2 / span 2;
+    }
+
+    .Layout-main {
+      grid-row: 1;
+    }
+  }
+
+  &.Layout--sidebarPosition-flowRow-none {
+    .Layout-sidebar {
+      display: none;
+    }
+  }
 }
 
 @mixin flow-as-row-divider {