SCSS Mixin to create any content responsive

make-responsive.scss

// Based on Twitter Bootstrap Mixins

@mixin make-responsive($prefix, $breakpoints: $grid-breakpoints) {
    @each $breakpoint in map-keys($breakpoints) {
        $infix: breakpoint-infix($breakpoint, $breakpoints);

        @if $infix != "" {
            @include media-breakpoint-down($breakpoint, $breakpoints) {
                #{$prefix}#{$infix}-down {
                    @content;
                }
            }

            @include media-breakpoint-only($breakpoint, $breakpoints) {
                #{$prefix}#{$infix}-only {
                    @content;
                }
            }

            @include media-breakpoint-up($breakpoint, $breakpoints) {
                #{$prefix}#{$infix}-up {
                    @content;
                }
            }
        }
    }
}

// Usage Example
// Generates classes according to breakpoints, e.g.
// .hide-md-down, .hide-md-only, .hide-md-up
@include make-responsive('.hide') {
    display: none;
}