Breakpoints are used to separate the height or width of the graphic windows in sequential-steps and provide for the case in which a visual redesign is needed to display changes in an appealing manner. Breakpoints work with the screen's min-width and max-width, which enable our website to function differently at different sizes. Min-Width: Refers to everything greater than or equal to the given screen size. Max-Width: Refers to everything equal to or less than the determined screen size. The measurements that establish our Breakpoints Media queries are:

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;  }
}