mixins to hit specific screen sizes using bootstrap's screen variables

_media_mixins_bootstrap.scss

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: $screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: $screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: $screen-lg-min) { ... }



// Going screen specific now, with mixins

@mixin xs-screen {
	@media (max-width: #{$screen-xs-max}) {
		@content;
	}
}

@mixin sm-screen {
	@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
		@content;
	}
}

@mixin md-screen {
	@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
		@content;
	}
}

@mixin lg-screen {
	@media (min-width: $screen-lg-min) {
		@content;
	}
}

// Usage

div{
	@include xs-screen {
		// basically only show on phones
	}
	@include sm-screen {
		// smaller tablets/portrait view
	}
	@include md-screen {
		// larger tablets/landscape/some desktops
	}
	@include lg-screen {
		// desktop+
	}
}