CSS for 5 Typical Media Query Break Points (Device Screen Sizes)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Typical device breakpoints - 5 groups */
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
[class*="col-"] {width: 100%; }
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
.col-min600-1 {width: 8.33%;}
.col-min600-2 {width: 16.66%;}
.col-min600-3 {width: 25%;}
.col-min600-4 {width: 33.33%;}
.col-min600-5 {width: 41.66%;}
.col-min600-6 {width: 50%;}
.col-min600-7 {width: 58.33%;}
.col-min600-8 {width: 66.66%;}
.col-min600-9 {width: 75%;}
.col-min600-10 {width: 83.33%;}
.col-min600-11 {width: 91.66%;}
.col-min600-12 {width: 100%;}
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
.col-min768-1 {width: 8.33%;}
.col-min768-2 {width: 16.66%;}
.col-min768-3 {width: 25%;}
.col-min768-4 {width: 33.33%;}
.col-min768-5 {width: 41.66%;}
.col-min768-6 {width: 50%;}
.col-min768-7 {width: 58.33%;}
.col-min768-8 {width: 66.66%;}
.col-min768-9 {width: 75%;}
.col-min768-10 {width: 83.33%;}
.col-min768-11 {width: 91.66%;}
.col-min768-12 {width: 100%;}
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
.col-min992-1 {width: 8.33%;}
.col-min992-2 {width: 16.66%;}
.col-min992-3 {width: 25%;}
.col-min992-4 {width: 33.33%;}
.col-min992-5 {width: 41.66%;}
.col-min992-6 {width: 50%;}
.col-min992-7 {width: 58.33%;}
.col-min992-8 {width: 66.66%;}
.col-min992-9 {width: 75%;}
.col-min992-10 {width: 83.33%;}
.col-min992-11 {width: 91.66%;}
.col-min992-12 {width: 100%;}
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
.col-min1200-1 {width: 8.33%;}
.col-min1200-2 {width: 16.66%;}
.col-min1200-3 {width: 25%;}
.col-min1200-4 {width: 33.33%;}
.col-min1200-5 {width: 41.66%;}
.col-min1200-6 {width: 50%;}
.col-min1200-7 {width: 58.33%;}
.col-min1200-8 {width: 66.66%;}
.col-min1200-9 {width: 75%;}
.col-min1200-10 {width: 83.33%;}
.col-min1200-11 {width: 91.66%;}
.col-min1200-12 {width: 100%;}
}
</style>
</head>
<body>
</body>
</html>
