Media queries using SCSS in Bootstrap 3

media-queries-b3.scss

// Using bootstrap the SASS way. Import your variables.
@import "bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/variables";

/* http://getbootstrap.com/css/#responsive-utilities */
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

// Mobile first
body{
	border: solid 4px red;
}

// Very small devices (tablets, 480px and up)
@media (min-width: $screen-xs-min) {
	body{
		border: solid 4px pink;
	}
}

// Small devices (tablets, 768px and up)
@media (min-width: $screen-sm-min) {
	body{
		border: solid 4px orange;
	}
}

// Medium devices (desktops, 992px and up)
@media (min-width: $screen-md-min) {
	body{
		border: solid 4px green;
	}	
}

// Large devices (large desktops, 1200px and up)
@media (min-width: $screen-lg-min) {
	body{
		border: solid 4px yellow;
	}
}

/* We occasionally expand on these media queries to include a max-width to limit CSS to a narrower set of devices. */

// 0 and up 768px
@media (max-width: $screen-xs-max) {

}

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

@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {

}