Bootstrap grid extension adds 5th breakpoint for super small devices (iPhone SE)

_bootstrap-grid-supersmall-extension.scss

// Extending bootstrap grid concept for an extra smaller breakpoint via mixin

// Set small breakpoints (default xs is 480px)
$screen-xxs-min:  380px;
$screen-xs-min:   480px;

// Generate the super columns (xxs extension)
@mixin make-xxs-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-xxs-column-offset($columns) {
  margin-left: percentage(($columns / $grid-columns));
}
@mixin make-xxs-column-push($columns) {
  left: percentage(($columns / $grid-columns));
}
@mixin make-xxs-column-pull($columns) {
  right: percentage(($columns / $grid-columns));
}

// Overwrite existing bootstrap grid xs to function with xxs
// We're basically telling the grid system to add a min-width break-
// -for what was the smallest bootstrap break (480px)
@mixin make-xs-column($columns, $gutter: $grid-gutter-width) {
  position: relative;
  min-height: 1px;
  padding-left:  ($gutter / 2);
  padding-right: ($gutter / 2);

  @media (min-width: $screen-xs-min) {
    float: left;
    width: percentage(($columns / $grid-columns));
  }
}
@mixin make-xs-column-offset($columns) {
  @media (min-width: $screen-xs-min) {
    margin-left: percentage(($columns / $grid-columns));
  }
}
@mixin make-xs-column-push($columns) {
  @media (min-width: $screen-xs-min) {
    left: percentage(($columns / $grid-columns));
  }
}
@mixin make-xs-column-pull($columns) {
  @media (min-width: $screen-xs-min) {
    right: percentage(($columns / $grid-columns));
  }
}