Frontpage with 1,2,3,4 columns

I tried to get frontpage 1,2,3 or 4 columns , depending on the size of the device.Please advice me if is not correct. I am not a specialist 🙂
I made the following changes in twocol – blog.css:

body.blog .site-content .blog-columns .post {
display: inline-block;
width: 25%;
padding: 0px 16px 48px 16px;
}

@media (max-width: 1079px) {
body.blog .site-content .blog-columns .post,
body.blog .sidebar .site-content .blog-columns .post {
display: block;
width: 33.3333%;
}
}

@media (max-width: 767px) {
body.blog .site-content .blog-columns .post,
body.blog .sidebar .site-content .blog-columns .post {
display: block;
width: 50%;
}
}

@media (max-width: 479px) {
body.blog .site-content .blog-columns .post,
body.blog .sidebar .site-content .blog-columns .post {
display: block;
width: 100%;
}
}