Add responsive media query modifiers

Author: moyus

scss/_level.scss

@@ -1,32 +1,13 @@
-/*
-Markup:
-<div class="l-level">
-  <div class="l-level__center">
-    <div class="l-level__item">...</div>
-    ...
-  </div>
-  <div class="l-level__left">
-    <div class="l-level__item">...</div>
-    ...
-  </div>
-  <div class="l-level__right">
-    <div class="l-level__item">...</div>
-    ...
-  </div>
-</div>
-*/
-
+/* ## Level
+---------------------------------*/
 // Block
 .l-level {
-  position: relative;
   display: flex;
-  flex-wrap: nowrap;
   align-items: center;
   justify-content: space-between;
 
   > .l-level__item {
-    flex: 1 1 0%;
-    text-align: center;
+    flex-grow: 1;
   }
 }
 
@@ -66,3 +47,36 @@ Markup:
 .l-level__center ~ .l-level__right {
   flex: 1 0 0%;
 }
+
+.l-level__item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+}
+
+// Modifiers
+@each $breakpoint, $value in $grid-breakpoints {
+  $suffix: "\\@#{$breakpoint}";
+
+  @include media-breakpoint-down($breakpoint) {
+    .l-level.l-level--break#{$suffix} {
+      display: block;
+      .l-level__center {
+        order: 0;
+      }
+      .l-level__item:not(:last-child) {
+        margin: 0 0 $space-stack-s 0;
+      }
+      .l-level__left,
+      .l-level__right,
+      .l-level__center {
+        flex-direction: column;
+        justify-content: center;
+        &:not(:last-child) {
+          margin-bottom: $space-stack-base;
+        }
+      }
+    }
+  }
+}

site/layouts/level.md

@@ -10,7 +10,7 @@ title: "Level"
 ## Basic
 Use flexbox to align items vertically.
 
-<div class="l-level u-mb-15">
+<div class="l-level l-level--break@md u-mb-15">
   <div class="l-level__left">
     <a href="#" class="l-level__item btn btn--success btn--smart">Add</a>
     <a href="#" class="l-level__item">All</a>
@@ -32,7 +32,7 @@ Use flexbox to align items vertically.
 </div>
 
 ```html
-<div class="l-level">
+<div class="l-level l-level--break@md">
   <div class="l-level__left">
     <a href="#" class="l-level__item btn btn--success btn--smart">Add</a>
     <a href="#" class="l-level__item">All</a>
@@ -59,7 +59,7 @@ Use flexbox to align items vertically.
 If you want to create 3-colums level, you must place `.l-level__center` in
 first, so it can use `~` CSS selector to control siblings style.
 
-<div class="l-level u-mb-15">
+<div class="l-level l-level--break@md u-mb-15">
   <div class="l-level__center">
     <div class="btn-group">
       <button class="btn btn--primary btn--outline">ALL PROJECTS</button>
@@ -87,7 +87,7 @@ first, so it can use `~` CSS selector to control siblings style.
 </div>
 
 ```html
-<div class="l-level">
+<div class="l-level l-level--break@md">
   <div class="l-level__center">
     <div class="btn-group">
       <button class="btn btn--primary btn--outline">ALL PROJECTS</button>