My preferred way how to use responsive helpers

responsive-helpers.scss

.only-extra-small {
    @include show-only-extra-small;
}

.only-medium-up {
    @include show-medium-up;
}

.only-small-up {
    @include show-small-up;
}

responsive.scss

$extra-small: 480px;
$small: 736px;
$medium: 980px;
$large: 1280px;
$extra-large: 1281px;

@mixin extra-small {
    @media all and (max-width: $extra-small) {
        @content;
    }
}
@mixin small {
    @media all and (max-width: $small) {
        @content;
    }
}
@mixin small-up {
    @media all and (min-width: $extra-small) {
        @content;
    }
}
@mixin medium {
    @media all and (max-width: $medium) {
        @content;
    }
}
@mixin medium-up {
    @media all and (min-width: $small) {
        @content;
    }
}
@mixin large {
    @media all and (max-width: $large) {
        @content;
    }
}
@mixin large-up {
    @media all and (min-width: $medium) {
        @content;
    }
}
@mixin extra-large {
    @media all and (min-width: $extra-large) {
        @content;
    }
}
@mixin show-only-extra-small {
    @media all and (min-width: $extra-small + 1) {
        display: none;
    }
}
@mixin show-medium-up {
    @media all and (max-width: $small) {
        display: none;
    }
}

@mixin show-small-up {
    @media all and (max-width: $extra-small + 1) {
        display: none;
    }
}