Add .stacked-for-medium class to button groups

diff --git a/docs/pages/button-group.md b/docs/pages/button-group.md
index 13b80cda98e58a19fae3c28bd0d5195272f3409f..41c368e5180136a0f4b277bfd58dbe3ed0bef166 100644 (file)
--- a/docs/pages/button-group.md
+++ b/docs/pages/button-group.md
@@ -80,7 +80,7 @@ Add the `.expanded` class to the container to make a full-width button group. Ea
 
 ## Stacking
 
-A button group can be made vertical with the `.stacked` class. Or, you can use `.stacked-for-small` to only stack a button group on small screens.
+A button group can be made vertical with the `.stacked` class. You can also use `.stacked-for-small` to only stack a button group on small screens, or `.stacked-for-medium` to only stack on small and medium screens.
 
 ```html_example
 <div class="stacked-for-small button-group">

diff --git a/scss/components/_button-group.scss b/scss/components/_button-group.scss
index 031a1f42e3576585592ec6de085ae0873fbe664c..c1a28dfc67fa97f9a3d9478cc8477277be9f9e9d 100644 (file)
--- a/scss/components/_button-group.scss
+++ b/scss/components/_button-group.scss
@@ -166,7 +166,8 @@ $buttongroup-expand-max: 6 !default;
     }
 
     &.stacked,
-    &.stacked-for-small {
+    &.stacked-for-small,
+    &.stacked-for-medium {
       @include button-group-stack;
     }
 
@@ -175,5 +176,11 @@ $buttongroup-expand-max: 6 !default;
         @include button-group-unstack;
       }
     }
+
+    &.stacked-for-medium {
+      @include breakpoint(large) {
+        @include button-group-unstack;
+      }
+    }
   }
 }