Los Beakpoint se utilizan para separar la altura o anchura de las ventanas gráficas en pasos-secuenciales y proporcionar para el caso en el que se necesita un nuevo diseño visual para mostrar los cambios de una manera atractiva. Los Breakpoints  trabajan con la anchura-mínima y anchura-máxima de la pantalla , que permiten a nuestra página web funcionar de manera diferente en diferentes tamaños.La anchura-mínima: Se refiere a todo lo superior o igual al tamaño de pantalla concreto. La anchura-máxima: Se refiere a todo igual o menor que el tamaño de la pantalla determinada. Las mediciones que establece Bootstrap Media Query Breakpoints son:

Extra small devices (phones, less than 768px)
No media query since this is the default in Bootstrap.

Small devices (tablets, 768px and up) 
@media (min-width: @screen-sm-min) {  }
Medium devices (desktops, 992px and up) 
@media (min-width: @screen-md-min) { }

Large devices (large desktops, 1200px and up) 
@media (min-width: @screen-lg-min) { }

@media (max-width: @screen-xs-max) {  }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {  }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {  }
@media (min-width: @screen-lg-min) {  }

Extra small devices (portrait phones, less than 544px)
 No media query since this is the default in Bootstrap

 Small devices (landscape phones, 544px and up)
@media (min-width: 544px) { ... }

 Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

 Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

Example of use:
@include media-breakpoint-up(sm) {
  .some-class {    display: block;  }
}