bootstrap-3-flexbox-stuff.scss

/**
 * Equal height colums by applying a class of .flex-layout to a row.
 */
.row {
    &.flex-layout {
        @include flex-layout;
    }
}

.row {
    &.no-gutter,
    &.no-gutters {
        @include no-gutters;
    }
}

// Vertical Center columns within a row
.row {
    &.row-xs-vertical-center {
        @media (max-width: $screen-xs-max) {
            display: flex;
            align-items: center;
        }
    }
}

// Flex Layout
// Apply to a .row to convert to Flex layout
// May require additional local stying to set specific flexbox settings
@mixin flex-layout {
    display: flex;
    flex-wrap: wrap;

    &:before,
    &:after {
        display: initial;
    }

    > [class*='col-'] {
        display: flex;
    }
}

// No gutters - apply to .row
@mixin no-gutters {
    [class*='col-'] {
        padding-left: 0;
        padding-right: 0;
    }
}