bootstrap 3 col-sx

_grid.scss

/*

override default before import

$screen-xs-max: 479px;

@import '_bootstrap.scss';

*/

$screen-sx: 480px !default;
$screen-sx-min: $screen-sx !default;
$screen-sx-max: ($screen-sm-min - 1) !default;

$container-sx: 400px + $grid-gutter-width !default;

.container {
	@include container-fixed;

	@media (min-width: $screen-sx-min) {
		width: $container-sx;
	}

	@media (min-width: $screen-sm-min) {
		width: $container-sm;
	}

	@media (min-width: $screen-md-min) {
		width: $container-md;
	}

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

@mixin make-sx-column($columns, $gutter: $grid-gutter-width) {
	position: relative;
	min-height: 1px;
	padding-left:  ($gutter / 2);
	padding-right: ($gutter / 2);

	@media (min-width: $screen-sx-min) {
		float: left;
		width: percentage(($columns / $grid-columns));
	}
}

@mixin make-sx-column-offset($columns) {
	@media (min-width: $screen-sx-min) {
		margin-left: percentage(($columns / $grid-columns));
	}
}

@mixin make-sx-column-push($columns) {
	@media (min-width: $screen-sx-min) {
		left: percentage(($columns / $grid-columns));
	}
}

@mixin make-sx-column-pull($columns) {
	@media (min-width: $screen-sx-min) {
		right: percentage(($columns / $grid-columns));
	}
}

@mixin make-grid-sx-column($i: 1, $list: ".col-sx-#{$i}") {
	@for $i from (1 + 1) through $grid-columns {
		$list: "#{$list}, .col-sx-#{$i}";
	}
	#{$list} {
		position: relative;
		min-height: 1px;
		padding-left:  ($grid-gutter-width / 2);
		padding-right: ($grid-gutter-width / 2);
	}
}

@include make-grid-sx-column();

@media (min-width: $screen-sx-min) {
	@include make-grid(sx);
}

.visible-sx-block,
.visible-sx-inline,
.visible-sx-inline-block {
	display: none !important;
}

.visible-sx-block {
	@media (min-width: $screen-sx-min) and (max-width: $screen-sx-max) {
		display: block !important;
	}
}

.visible-sx-inline {
	@media (min-width: $screen-sx-min) and (max-width: $screen-sx-max) {
		display: inline !important;
	}
}
.visible-sx-inline-block {
	@media (min-width: $screen-sx-min) and (max-width: $screen-sx-max) {
		display: inline-block !important;
	}
}

@media (min-width: $screen-sx-min) and (max-width: $screen-sx-max) {
	@include responsive-visibility('.visible-sx');
}

@media (min-width: $screen-sx-min) and (max-width: $screen-sx-max) {
	@include responsive-invisibility('.hidden-sx');
}

FYI I've published similar code as https://github.com/adjohnson916/bootstrap-grid-ms.