Add an additional breakpoint which covers 0..479px to Twitter Bootstrap 3.1.

bootstrap-grid-tn.css.scss

// Add a breakpoint which covers 0..479px

$screen-tn: 320px !default;
$screen-tn-min: $screen-tn !default;
$screen-tn-max: ($screen-xs-min - 1) !default;


// Additional grid mixins for tn.

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

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

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

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

// We need .col-tn-#

@mixin make-grid-columns() {
  $list: '';
  $i: 1;
  $list: ".col-tn-#{$i}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}";
  @for $i from (1 + 1) through $grid-columns {
    $list: "#{$list}, .col-tn-#{$i}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}";
  }
  #{$list} {
    position: relative;
    // Prevent columns from collapsing when empty
    min-height: 1px;
    // Inner gutter via padding
    padding-left:  ($grid-gutter-width / 2);
    padding-right: ($grid-gutter-width / 2);
  }
}

// Let's re-declare grids.

@include make-grid(tn);

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

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

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

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

// Redefind responsive utilities.

@-ms-viewport {
  width: device-width;
}

@include responsive-invisibility('.visible-tn, .visible-xs, .visible-sm, .visible-md, .visible-lg');

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

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

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

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

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

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

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

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

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

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


// Shorthand mixin for the breakpoint.

@mixin bp-tn {
  @media (max-width: $screen-tn-max) {
    @content;
  }
}