Classes

                /* Display Flex */
                .flex, .valign-wrapper {
                  display: -ms-flexbox;
                }
                .valign {-ms-flex: 0 1 auto;}
                .valign-wrapper {
                  align-items: center;
                  display: flex;
                }
                
                .flex-center {align-items: center;}
                .flex-start {align-items: flex-start;}
                .flex-end {align-items: flex-end;}
                .flex-wrap {flex-wrap: wrap;}
                .flex-it { @extend %flex-it; }
                .flex-row { @extend %flex-row; }
                .flex-col { @extend %flex-col; }
                .flex-row-reverse { @extend %flex-row-reverse; }
                .flex-col-reverse { @extend %flex-col-reverse; }
                .flex-align-between { @extend %flex-align-between; }
                .flex-align-center { @extend %flex-align-center; }
                .flex-align-start { @extend %flex-align-start; }
                .flex-align-items-start { @extend %flex-align-items-start; }
                .flex-align-items-center { @extend %flex-align-items-center; }
                .flex-start-all { @extend %flex-start-all; }
                .flex-align-items-stretch { @extend %flex-align-items-stretch; }
                .flex-justify-between { @extend %flex-justify-between; }
                .flex-justify-center { @extend %flex-justify-center; }
                .flex-justify-start { @extend %flex-justify-start; }
                .flex-justify-end { @extend %flex-justify-end; }
                .flex-justify-space-around { @extend %flex-justify-space-around; }
                .flex-wrap { @extend %flex-wrap; }
                .flex-item-auto { @extend %flex-item-auto; }
                
                //Small and up 
                .sflex{@media #{$small-and-up}{@include flex();}}
                .sflex-it { @media #{$small-and-up} { @include flex-it; }}
                .sflex-row { @media #{$small-and-up} { @include flex-row; }}
                .sflex-col { @media #{$small-and-up} { @include flex-col; }}
                .sflex-row-reverse { @media #{$small-and-up} { @include flex-row-reverse; }}
                .sflex-col-reverse { @media #{$small-and-up} { @include flex-col-reverse; }}
                .sflex-align-between { @media #{$small-and-up} { @include flex-align-between; }}
                .sflex-align-center { @media #{$small-and-up} { @include flex-align-center; }}
                .sflex-align-start { @media #{$small-and-up} { @include flex-align-start; }}
                .sflex-align-items-start { @media #{$small-and-up} { @include flex-align-items-start; }}
                .sflex-align-items-center { @media #{$small-and-up} { @include flex-align-items-center; }}
                .sflex-start-all { @media #{$small-and-up} { @include flex-start-all; }}
                .sflex-align-items-stretch { @media #{$small-and-up} { @include flex-align-items-stretch; }}
                .sflex-justify-between { @media #{$small-and-up} { @include flex-justify-between; }}
                .sflex-justify-center { @media #{$small-and-up} { @include flex-justify-center; }}
                .sflex-justify-start { @media #{$small-and-up} { @include flex-justify-start; }}
                .sflex-justify-end { @media #{$small-and-up} { @include flex-justify-end; }}
                .sflex-justify-space-around { @media #{$small-and-up} { @include flex-justify-space-around; }}
                .sflex-wrap { @media #{$small-and-up} { @include flex-wrap; }}
                .sflex-item-auto { @media #{$small-and-up} { @include flex-item-auto; }}

                //Medium and up
                .mflex{@media #{$medium-and-up}{@include flex();}}
                .mflex-it { @media #{$medium-and-up} { @include flex-it; }}
                .mflex-row { @media #{$medium-and-up} { @include flex-row; }}
                .mflex-col { @media #{$medium-and-up} { @include flex-col; }}
                .mflex-row-reverse { @media #{$medium-and-up} { @include flex-row-reverse; }}
                .mflex-col-reverse { @media #{$medium-and-up} { @include flex-col-reverse; }}
                .mflex-align-between { @media #{$medium-and-up} { @include flex-align-between; }}
                .mflex-align-center { @media #{$medium-and-up} { @include flex-align-center; }}
                .mflex-align-start { @media #{$medium-and-up} { @include flex-align-start; }}
                .mflex-align-items-start { @media #{$medium-and-up} { @include flex-align-items-start; }}
                .mflex-align-items-center { @media #{$medium-and-up} { @include flex-align-items-center; }}
                .mflex-start-all { @media #{$medium-and-up} { @include flex-start-all; }}
                .mflex-align-items-stretch { @media #{$medium-and-up} { @include flex-align-items-stretch; }}
                .mflex-justify-between { @media #{$medium-and-up} { @include flex-justify-between; }}
                .mflex-justify-center { @media #{$medium-and-up} { @include flex-justify-center; }}
                .mflex-justify-start { @media #{$medium-and-up} { @include flex-justify-start; }}
                .mflex-justify-end { @media #{$medium-and-up} { @include flex-justify-end; }}
                .mflex-justify-space-around { @media #{$medium-and-up} { @include flex-justify-space-around; }}
                .mflex-wrap { @media #{$medium-and-up} { @include flex-wrap; }}
                .mflex-item-auto { @media #{$medium-and-up} { @include flex-item-auto; }}

                // Large and up
                .lflex-it { @media #{$large-and-up} { @include flex-it; }}
                .lflex-row { @media #{$large-and-up} { @include flex-row; }}
                .lflex-col { @media #{$large-and-up} { @include flex-col; }}
                .lflex-row-reverse { @media #{$large-and-up} { @include flex-row-reverse; }}
                .lflex-col-reverse { @media #{$large-and-up} { @include flex-col-reverse; }}
                .lflex-align-between { @media #{$large-and-up} { @include flex-align-between; }}
                .lflex-align-center { @media #{$large-and-up} { @include flex-align-center; }}
                .lflex-align-start { @media #{$large-and-up} { @include flex-align-start; }}
                .lflex-align-items-start { @media #{$large-and-up} { @include flex-align-items-start; }}
                .lflex-align-items-center { @media #{$large-and-up} { @include flex-align-items-center; }}
                .lflex-start-all { @media #{$large-and-up} { @include flex-start-all; }}
                .lflex-align-items-stretch { @media #{$large-and-up} { @include flex-align-items-stretch; }}
                .lflex-justify-between { @media #{$large-and-up} { @include flex-justify-between; }}
                .lflex-justify-center { @media #{$large-and-up} { @include flex-justify-center; }}
                .lflex-justify-start { @media #{$large-and-up} { @include flex-justify-start; }}
                .lflex-justify-end { @media #{$large-and-up} { @include flex-justify-end; }}
                .lflex-justify-space-around { @media #{$large-and-up} { @include flex-justify-space-around; }}
                .lflex-wrap { @media #{$large-and-up} { @include flex-wrap; }}
                .lflex-item-auto { @media #{$large-and-up} { @include flex-item-auto; }}

                XLarge and up
                .xlflex-it { @media #{$xlarge-and-up} { @include flex-it; }}
                .xlflex-row { @media #{$xlarge-and-up} { @include flex-row; }}
                .xlflex-col { @media #{$xlarge-and-up} { @include flex-col; }}
                .xlflex-row-reverse { @media #{$xlarge-and-up} { @include flex-row-reverse; }}
                .xlflex-col-reverse { @media #{$xlarge-and-up} { @include flex-col-reverse; }}
                .xlflex-align-between { @media #{$xlarge-and-up} { @include flex-align-between; }}
                .xlflex-align-center { @media #{$xlarge-and-up} { @include flex-align-center; }}
                .xlflex-align-start { @media #{$xlarge-and-up} { @include flex-align-start; }}
                .xlflex-align-items-start { @media #{$xlarge-and-up} { @include flex-align-items-start; }}
                .xlflex-align-items-center { @media #{$xlarge-and-up} { @include flex-align-items-center; }}
                .xlflex-start-all { @media #{$xlarge-and-up} { @include flex-start-all; }}
                .xlflex-align-items-stretch { @media #{$xlarge-and-up} { @include flex-align-items-stretch; }}
                .xlflex-justify-between { @media #{$xlarge-and-up} { @include flex-justify-between; }}
                .xlflex-justify-center { @media #{$xlarge-and-up} { @include flex-justify-center; }}
                .xlflex-justify-start { @media #{$xlarge-and-up} { @include flex-justify-start; }}
                .xlflex-justify-end { @media #{$xlarge-and-up} { @include flex-justify-end; }}
                .xlflex-justify-space-around { @media #{$xlarge-and-up} { @include flex-justify-space-around; }}
                .xlflex-wrap { @media #{$xlarge-and-up} { @include flex-wrap; }}
                .xlflex-item-auto { @media #{$xlarge-and-up} { @include flex-item-auto; }}

                // FLEX ADD-ON
                %flex-it { @include flex-it; }
                %flex-row { @include flex-row; }
                %flex-col { @include flex-col; }
                %flex-row-reverse { @include flex-row-reverse; }
                %flex-col-reverse { @include flex-col-reverse; }
                %flex-align-between { @include flex-align-between; }
                %flex-align-center { @include flex-align-center; }
                %flex-align-start { @include flex-align-start; }
                %flex-align-items-start { @include flex-align-items-start; }
                %flex-align-items-center { @include flex-align-items-center; }
                %flex-start-all { @include flex-start-all; }
                %flex-align-items-stretch { @include flex-align-items-stretch; }
                %flex-justify-between { @include flex-justify-between; }
                %flex-justify-center { @include flex-justify-center; }
                %flex-justify-start { @include flex-justify-start; }
                %flex-justify-end { @include flex-justify-end; }
                %flex-justify-space-around { @include flex-justify-space-around; }
                %flex-wrap { @include flex-wrap; }
                %flex-item-auto { @include flex-item-auto; }