I have a question. I'm building my own css framework but I have some problem with grid system. I wanna switch grid class when screen size changed. Example, In Zurb Foundation we grid:
<div class="small-8 medium-4 large-2 columns"> Content </div>
So in the large screen, the div's width is 2/12. In the medium screen, the div's width is 4/12. In the small screen, the div's width is 8/12.
Can anyone tell me how to do this?
This is the media queries that most of the world use this day:)
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
}