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.