bootstrap_grid_emulation.scss

$xs-min: 320;
$xs-max: 767;              // phone
$sm-min: $xs-max + 1 ;
$sm-max: 991;              // tablet
$md-min: $sm-max + 1;
$md-max: 1199;             // desktop
$lg-min: $md-max + 1;      // desktop-large
$fourK: 2560;              // 4K displays

$hide-screen:    /* to 319 */             "only screen and (max-width : #{$xs-min - 1}px)";
$xs-screen-min:  /* from 320 */           "only screen and (min-width : #{$xs-min}px)";
$xs-screen-max:  /* to 767 */             "only screen and (max-width : #{$xs-max}px)";
$xs_screen:      /* 320 - 767 */          "only screen and (min-width : #{$xs-min}px) and (max-width : #{$xs-max}px)";
$sm-screen-min:  /* from 768 */           "only screen and (min-width : #{$sm-min}px)";
$sm-screen-max:  /* to 991 */             "only screen and (max-width : #{$sm-max}px)";
$sm_screen:      /* 768 - 991 */          "only screen and (min-width : #{$sm-min}px) and (max-width : #{$sm-max}px)";
$md_screen-min:  /* from 992 */           "only screen and (min-width : #{$md-min}px)";
$md_screen-max:  /* to 1199 */            "only screen and (max-width : #{$md-max}px)";
$md_screen:      /* 992 - 1199 */         "only screen and (min-width : #{$md-min}px) and (max-width : #{$md-max}px)";
$lg_screen:      /* from 1200 */          "only screen and (min-width : #{$lg-min}px)";
$fourK-_screen:  /* from 2560 */          "only screen and (min-width : #{$fourK}px)";



//bootstrap sizes
$container-sizes: (
	$xs_screen: 100%,
	$sm_screen: 750px,
	$md_screen: 970px,
	$lg_screen: 1170px
);

$media-sizes: (
	'xs': $xs-screen-min,
	'sm': $sm-screen-min,
	'md': $md_screen-min,
	'lg': $lg_screen
);

$prop-list: (
'-': 'width',
'-pull-': 'right',
'-push-': 'left',
'-offset-': 'margin-left'
);

$column: 100/12;

$col-size: (
	1: $column + '%',
	2: $column * 2  + '%',
	3: $column * 3 + '%',
	4: $column * 4 + '%',
	5: $column * 5 + '%',
	6: $column * 6 + '%',
	7: $column * 7 + '%',
	8: $column * 8 + '%',
	9: $column * 9 + '%',
	10: $column * 10 + '%',
	11: $column * 11 + '%',
	12: 100%
);
.row { //for step0 (default: .container)
	@each $var, $size in $container-sizes {
		@media #{$var} {
			width: #{$size};
			max-width: #{$size};
		}
	}
}

@each $scr, $media in $media-sizes {
	@media #{$media} {
		@each $col, $size in $col-size {
			@each $i, $j in $prop-list {
				.col-#{$scr}#{$i}#{$col} {
					#{$j}: #{$size};
				}
			}
		}
	}
}

div[class^="col-"] {
	position: relative;
	min-height: 1px;
	padding: 0 15px;
	float: left;
	box-sizing: border-box;
}