@mixin respond-to($media) {
    @if $media == xs {
        @media only screen and (max-width: $screen-xs-max) { @content; }
    }
    @else if $media == sm {
        @media only screen and (max-width: $screen-sm-max) { @content; }
    }
    @else if $media == md {
        @media only screen and (max-width: $screen-md-max) { @content; }
    }
    @else {
        @media only screen and (max-width: $media) { @content; }
    }
}

@mixin respond-from($media) {
    @if $media == xs-min {
        @media only screen and (min-width: $screen-xs-max) { @content; }
    }
    @else if $media == sm-min {
        @media only screen and (min-width: $screen-sm-max) { @content; }
    }
    @else if $media == md-min {
        @media only screen and (min-width: $screen-md-max) { @content; }
    }
    @else if $media == lg {
        @media only screen and (min-width: $screen-lg-min) { @content; }
    }
    @else {
        @media only screen and (min-width: $media) { @content; }
    }
}