Media query mixins for BootStrap.

_bootstrap.scss

@mixin when($size) {
	@if $size == 'xl' {
		@media only screen and (min-width: 1200px) {
			@content;
		}
	} @else if $size == 'l' {
		@media only screen and (min-width: 992px) and (max-width: 1199px) {
			@content;
		}
	} @else if $size == 'm' {
		@media only screen and (min-width: 768px) and (max-width: 991px) {
			@content;
		}
	} @else if $size == 's' {
		@media only screen and (min-width: 480px) and (max-width: 767px) {
			@content;
		}
	} @else if $size == 'xs' {
		@media only screen and (min-width: 0px) and (max-width: 479px) {
			@content;
		}
	}
}


@mixin and-below($size) {
	@if $size == 'l' {
		@media only screen and (max-width: 1199px) {
			@content;
		}
	}  @else if $size == 'm' {
		@media only screen and (max-width: 991px) {
			@content;
		}
	} @else if $size == 's' {
		@media only screen and (max-width: 767px) {
			@content;
		}
	} @else if $size == 'xs' {
		@media only screen and (max-width: 479px) {
			@content;
		}
	}
}

@mixin and-above($size) {
	@if $size == 'l' {
		@media only screen and (min-width: 992px) {
			@content;
		}
	} @else if $size == 'm' {
		@media only screen and (min-width: 768px) {
			@content;
		}
	} @else if $size == 's' {
		@media only screen and (min-width: 480px) {
			@content;
		}
	}
}