diff --git a/less/grid.less b/less/grid.less
index 88957f42a586361bab27f5d35173f5ca3a3d68a5..2170a025d16230866ad0a6705cf97bfc92f4cc8e 100644
--- a/less/grid.less
+++ b/less/grid.less
@@ -10,6 +10,9 @@
 .container {
   .container-fixed();
 
+  // @media (min-width: @screen-hs-min) {
+  //   width: @container-hs;
+  // }
   @media (min-width: @screen-sm-min) {
     width: @container-sm;
   }
diff --git a/less/mixins.less b/less/mixins.less
index ae746d83aa8677069fa72976fff2a77fcc6f4f1e..ab8377ae0abc5a5c0c88070115a2fbf44bd2de65 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -680,6 +680,33 @@
   }
 }
 
+.make-hs-column(@columns; @gutter: @grid-gutter-width) {
+  position: relative;
+  min-height: 1px;
+  padding-left:  (@gutter / 2);
+  padding-right: (@gutter / 2);
+
+  @media (min-width: @screen-hs-min) {
+    float: left;
+    width: percentage((@columns / @grid-columns));
+  }
+}
+
+.make-hs-column-offset(@columns) {
+  @media (min-width: @screen-hs-min) {
+    margin-left: percentage((@columns / @grid-columns));
+  }
+}
+.make-hs-column-push(@columns) {
+  @media (min-width: @screen-hs-min) {
+    left: percentage((@columns / @grid-columns));
+  }
+}
+.make-hs-column-pull(@columns) {
+  @media (min-width: @screen-hs-min) {
+    right: percentage((@columns / @grid-columns));
+  }
+}
 
 // Generate the small columns
 .make-sm-column(@columns; @gutter: @grid-gutter-width) {
@@ -776,11 +803,11 @@
 .make-grid-columns() {
   // Common styles for all sizes of grid columns, widths 1-12
   .col(@index) when (@index = 1) { // initial
-    @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
+    @item: ~".col-xs-@{index}, .col-hs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
     .col((@index + 1), @item);
   }
   .col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo
-    @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
+    @item: ~".col-xs-@{index}, .col-hs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
     .col((@index + 1), ~"@{list}, @{item}");
   }
   .col(@index, @list) when (@index > @grid-columns) { // terminal
diff --git a/less/responsive-utilities.less b/less/responsive-utilities.less
index 5a31816af0dff9dd7334cf37273d114d2075dea5..8d3f75f84563c89dbdb8cd81854a6b7657dbde5a 100644
--- a/less/responsive-utilities.less
+++ b/less/responsive-utilities.less
@@ -30,6 +30,13 @@
     .responsive-visibility();
   }
 }
+.visible-hs {
+  .responsive-invisibility();
+
+  @media (min-width: @screen-hs-min) and (max-width: @screen-hs-max) {
+    .responsive-visibility();
+  }
+}
 .visible-sm {
   .responsive-invisibility();
 
@@ -57,6 +64,11 @@
     .responsive-invisibility();
   }
 }
+.hidden-hs {
+  @media (min-width: @screen-hs-min) and (max-width: @screen-hs-max) {
+    .responsive-invisibility();
+  }
+}
 .hidden-sm {
   @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
     .responsive-invisibility();
diff --git a/less/tables.less b/less/tables.less
index c41989c04d2d0d484ad337017936603fb2a5efa2..32eeee35346512dada3863fff04357d734db93ee 100644
--- a/less/tables.less
+++ b/less/tables.less
@@ -168,7 +168,7 @@ table {
 // by enabling horizontal scrolling. Only applies <768px. Everything above that
 // will display normally.
 
-@media (max-width: @screen-xs-max) {
+@media (max-width: @screen-hs-max) {
   .table-responsive {
     width: 100%;
     margin-bottom: (@line-height-computed * 0.75);
diff --git a/less/variables.less b/less/variables.less
index b06206dfb296fb0bcbeae503938ee2851f8aaf9c..2f0ceb1283dd0070994b0994275437bed760849a 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -260,6 +260,9 @@
 // Note: Deprecated @screen-xs and @screen-phone as of v3.0.1
 @screen-xs:                  480px;
 @screen-xs-min:              @screen-xs;
+
+// Horizontal Small screen / phone horizontal
+@screen-hs-min:              @screen-xs;
 @screen-phone:               @screen-xs-min;
 
 // Small screen / tablet
@@ -281,7 +284,8 @@
 @screen-lg-desktop:          @screen-lg-min;
 
 // So media queries don't overlap when required, provide a maximum
-@screen-xs-max:              (@screen-sm-min - 1);
+@screen-xs-max:              (@screen-hs-min - 1);
+@screen-hs-max:              (@screen-sm-min - 1);
 @screen-sm-max:              (@screen-md-min - 1);
 @screen-md-max:              (@screen-lg-min - 1);
 
@@ -811,6 +815,10 @@
 //
 //## Define the maximum width of `.container` for different screen sizes.
 
+// Horizontal Small screen / phone horizontal
+//** For `@screen-sm-min` and up.
+@container-hs:                 ((434px + @grid-gutter-width));
+
 // Small screen / tablet
 @container-tablet:             ((720px + @grid-gutter-width));
 //** For `@screen-sm-min` and up.