Simple Grid

acme-grid.css

.container {
    width: 1170px;
}
.acme-hide {
    display: none !important;
}
.acme-show {
    display: block !important;
}
.clearfix:before,
.clearfix:after,
.container:before,
.container:after, {
    content: " ";
    display: table;
}
.clearfix:after,
.container:after, {
    clear: both;
}

/*grid*/
.acme-col-1,
.acme-col-2,
.acme-col-3,
.acme-col-4,
.acme-col-5,
.acme-col-6{
    float: left;
    position: relative;
    min-height: 1px;
    padding: 5px;
}
.acme-col-1 {
    width: 100%;
}
.acme-col-2 {
    width: 50%;
}
.acme-col-3 {
    width: 33.3%;
}
.acme-col-4 {
    width: 25%;
}
.acme-col-5 {
    width: 20%;
}
.acme-col-6 {
    width: 16.6%;
}
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
    .container {
        width: 97%;
    }
}
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
    .acme-col-5 {
        width: 25%;
    }
    .acme-col-6 {
        width: 33.3%;
    }
}
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
    .acme-col-3,
    .acme-col-4,
    .acme-col-5 {
        width: 50%;
    }
}
/* Landscape phones and down */
@media screen and (max-width:639px) {
    .acme-col-6 {
        width: 50%;
    }
}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
    .acme-col-2 {
        width: 100%;
    }
}
/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
    .acme-col-3,
    .acme-col-4,
    .acme-col-5,
    .acme-col-6 {
        width: 100%;
    }
}