The @media query is 1/3 of the recipe for responsive design. It is the key ingredient that, in it’s simplest form, allows specified CSS to be applied depending on the device and whether it matches the media query criteria.
479px and lower: for mobiles
480px – 767px: for mobiles
768px – 980px: for portrait tablets
981px – 1100px: for landscape tablets
1101px – 1405px: for desktops
1405px and above: for large desktops
The most important points sit at max-width 768px for mobiles and 1101px for tablets. Another clear point is 981px where the sidebar moves below the content and the menu is turning mobile.