Al momento de estilizar un sitio web para que quede bien para responsive, se necesita utilizar una serie de "breakpoints" en el código CSS, para definir las clases que actuarán en determinadas resoluciones de pantalla.
Por lo tanto para definir estos breakpoints para los que sería celulares, tablets, desktop y monitores wide, se puede pensar en los siguientes rangos:

// Celulares
@media (max-width: 599px) { @content; }

// Tablet-portrait-up
@media (min-width: 600px) { @content; }

// Tablet-landscape-up
@media (min-width: 900px) { @content; }

// Desktop
@media (min-width: 1200px) { @content; }

// Big-desktop-up
@media (min-width: 1800px) { @content; }