Now, a days bootstrap becoming more powerful start-up framework. It's saving most of skilled developers time and clients hourly rates. CSS Media Queries are highly useful to change the properties of your website based on device properties. Standard Media Queries are Different on Standard Devices. Based on media query, you will have a set of styles which will be common for all screen sizes. Then you will use media queries specific to the devices your site has to override any specific styles you want to be different for different screen sizes.
[news_hub_code]
/* Large desktops and laptops */
@media (min-width: 1200px) {}
/* Portrait tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {}
/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {}
/* Landscape phones and portrait tablets */
@media (max-width: 767px) {}
/* Landscape phones and smaller */
@media (max-width: 480px) {}
[/news_hub_code]
If you're using LESS or SCSS/SASS and you're using a LESS/SCSS version of Bootstrap, you can use variables as well, provided you have access to them. A LESS translation of @full-decent's answer would be as follows:
[news_hub_code]
@media(max-width: @screen-xs-max){}
@media(min-width: @screen-sm-min){} /* deprecated: @screen-tablet, or @screen-sm */
@media(min-width: @screen-md-min){} /* deprecated: @screen-desktop, or @screen-md */
@media(min-width: @screen-lg-min){} /* deprecated: @screen-lg-desktop, or @screen-lg */
[/news_hub_code]
Sources from : Stack Overflow