@mixin show($breakpoint, $row) {
    @if $breakpoint == "xs" {
        @if $row == "true" or $row == "row" {
            display: flex;
        } @else {
            display: block;
        }
    } @else if $breakpoint == "xs-only" {
        @media #{$breakpoint-xs-only} {
            @if $row == "true" or $row == "row" {
                display: flex;
            } @else {
                display: block;
            }
        }
    } @else if $breakpoint == "sm" {
        @media #{$breakpoint-sm-up} {
            @if $row == "true" or $row == "row" {
                display: flex;
            } @else {
                display: block;
            }
        }
    } @else if $breakpoint == "sm-only" {
        @media #{$breakpoint-sm-only} {
            @if $row == "true" or $row == "row" {
                display: flex;
            } @else {
                display: block;
            }
        }
    } @else if $breakpoint == "md" {
        @media #{$breakpoint-md-up} {
            @if $row == "true" or $row == "row" {
                display: flex;
            } @else {
                display: block;
            }
        }
    } @else if $breakpoint == "md-only" {
        @media #{$breakpoint-md-only} {
            @if $row == "true" or $row == "row" {
                display: flex;
            } @else {
                display: block;
            }
        }
    } @else if $breakpoint == "lg" {
        @media #{$breakpoint-lg-up} {
            @if $row == "true" or $row == "row" {
                display: flex;
            } @else {
                display: block;
            }
        }
    } @else if $breakpoint == "lg-only" {
        @media #{$breakpoint-lg-only} {
            @if $row == "true" or $row == "row" {
                display: flex;
            } @else {
                display: block;
            }
        }
    } @else if $breakpoint == "xl" {
        @media #{$breakpoint-xl-up} {
            @if $row == "true" or $row == "row" {
                display: flex;
            } @else {
                display: block;
            }
        }
    } @else {
        @warn "show mixin arg must be one of the existing breakpoints or ranges (#{$breakpoint-all-prefixes})";
    }
}

@mixin hide($breakpoint) {
    @if $breakpoint == "xs" {
        display: none;
    } @else if $breakpoint == "xs-only" {
        @media #{$breakpoint-xs-only} {
            display: none;
        }
    } @else if $breakpoint == "sm" {
        @media #{$breakpoint-sm-up} {
            display: none;
        }
    } @else if $breakpoint == "sm-only" {
        @media #{$breakpoint-sm-only} {
            display: none;
        }
    } @else if $breakpoint == "md" {
        @media #{$breakpoint-md-up} {
            display: none;
        }
    } @else if $breakpoint == "md-only" {
        @media #{$breakpoint-md-only} {
            display: none;
        }
    } @else if $breakpoint == "lg" {
        @media #{$breakpoint-lg-up} {
            display: none;
        }
    } @else if $breakpoint == "lg-only" {
        @media #{$breakpoint-lg-only} {
            display: none;
        }
    } @else if $breakpoint == "xl" {
        @media #{$breakpoint-xl-up} {
            display: none;
        }
    } @else {
        @warn "hide mixin arg must be one of the existing breakpoints or ranges (#{$breakpoint-all-prefixes})";
    }
}