To incorporate a new breakpoint into Bootstrap 4, adjust the $grid-breakpoints and $container-max-widths variables using SASS.

    /* your _custom.scss */

    @import "bootstrap/functions";
    @import "bootstrap/variables";
    @import "bootstrap/mixins";

    $grid-breakpoints: (
      xxs: 0,
      xs: 375px,
      sm: 544px,
      md: 768px,
      lg: 992px,
      xl: 1200px
    );

    $container-max-widths: (
      xxs: 375px,
      xs: 375px,
      sm: 544px,
      md: 768px,
      lg: 992px,
      xl: 1200px
    );

    @import "bootstrap";

Update 2018: In Bootstrap 4, with the removal of the xs- infix, introducing a smaller xxs breakpoint means there is no infix for the lowest breakpoint. For instance:

col-6 (50% on xxs)
col-xs-6 (50% on xs)

Tips for customizing Bootstrap using SASS, as per the documentation...

Adjust any Sass variables and maps within your custom.scss.... Each Sass variable in Bootstrap 4 comes with the !default flag, enabling you to modify the variable’s default value in your own Sass without altering Bootstrap's source code. Simply copy and paste variables as necessary, adjust their values, and remove the !default flag. If a variable has already been defined, it will not be overridden by the default values in Bootstrap.

There are some interesting variants of Bootstrap out there that offer additional breakpoints in a seamless way. One particular fork that caught my attention is regularly updated and functions smoothly for me:

SCSS: https://gist.github.com/Jakobud/c057577daddbde4dd709

// Introducing the Mid-Small breakpoint

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

// Adjusting Extra Small max value (Unable to override non-default variables in SASS)
$screen-xs-max-new: ($screen-ms-min - 1) !default;

// Standard styles (refer to make-grid-columns() in bootstrap/mixins/_grid-framework.scss)

.col-ms-1,
.col-ms-2,
.col-ms-3,
.col-ms-4,
.col-ms-5,
.col-ms-6,
.col-ms-7,
.col-ms-8,
.col-ms-9,
.col-ms-10,
.col-ms-11,
.col-ms-12 {
  position: relative;
  min-height: 1px;
  padding-left:  ($grid-gutter-width / 2);
  padding-right: ($grid-gutter-width / 2);
}

// Miscellaneous adjustments for col-ms classes

@media (min-width: $screen-ms) and (max-width: $screen-ms-max) {
  .container {
    max-width: $screen-sm - 20px;
  }
  .hidden-xs {
    display: block !important;
  }
}

// Grid system for col-ms

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

// Visibility utilities

@include responsive-invisibility('.visible-xs, .visible-ms');

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

@media (max-width: $screen-xs-max-new) {
  @include responsive-visibility('.visible-xs');
}
.visible-xs-block {
  @media (max-width: $screen-xs-max-new) {
    display: block !important;
  }
}
.visible-xs-inline {
  @media (max-width: $screen-xs-max-new) {
    display: inline !important;
  }
}
.visible-xs-inline-block {
  @media (max-width: $screen-xs-max-new) {
    display: inline-block !important;
  }
}

// Additional visibility settings for mid-small breakpoint

@media (min-width: $screen-ms-min) and (max-width: $screen-ms-max) {
  @include responsive-visibility('.visible-ms');
}
.visible-ms-block {
  @media (min-width: $screen-ms-min) and (max-width: $screen-ms-max) {
    display: block !important;
  }
}
.visible-ms-inline {
  @media (min-width: $screen-ms-min) and (max-width: $screen-ms-max) {
    display: inline !important;
  }
}
.visible-ms-inline-block {
  @media (min-width: $screen-ms-min) and (max-width: $screen-ms-max) {
    display: inline-block !important;
  }
}

// Additional visibility adjustment for extra small screens

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

// Additional invisibility setting for mid-small breakpoint

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

LESS: https://gist.github.com/wdollar/135ec3c80faaf5a821b0

To assist you in your design process, here is a breakdown of media queries for various iPhone models:

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

<!-- Additional iPhone models can be accommodated with appropriate media queries -->

If you're working with Bootstrap 4, it's simple to add a new breakpoint by adjusting the $grid-breakpoints variable. The default setting is:

$grid-breakpoints: (
  xs: 0,
  sm: 544px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;

To introduce a new breakpoint,

$grid-breakpoints: (
  xxs: 0,
  xs: 375px,
  sm: 544px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;

You could create a new identifier like ms for "medium-small":

$grid-breakpoints: (
  xs: 0,
  ms: 375px,
  sm: 544px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;

However, in TWBS3, adding a new breakpoint requires some code tinkering.