<style>
#moosegrid{
border:1px solid red;
width:80%;
margin-right:auto;
margin-left:auto;
}

.col img{width:80%;margin:20px}

@media screen and (min-width: 961px) and (max-width: 3000px)
{
.col {float:left; width: 25% !important;}
.cell{width:25%;}
}

@media screen and (min-width: 768px) and (max-width: 960px)
{
.col {float:left; width: 33% !important;}
.cell{width:33%;}
}

@media screen and (min-width: 480px) and (max-width: 767px)
{
.col {float:left; width: 50% !important;}
.cell{width:50%;}
}

@media screen and (min-width: 1px) and (max-width: 479px)
{
.col {float:left;width: 100% !important;}
.cell{width:100%;}
}

.col {
background-color: red;
}
.col:nth-of-type(2n) {
background-color: white;
}
.col:nth-of-type(3n) {
background-color: blue;
}
.col:nth-of-type(4n) {
background-color: green;
}

</style>

<div id="moosegrid">
<div class="row">
<div class="col">
<img class="cell" src="http://mooseloose.com/images/moose.png">
</div>
<div class="col">
<img class="cell" src="http://mooseloose.com/images/moose.png">
</div>
<div class="col">
<img class="cell" src="http://mooseloose.com/images/moose.png">
</div>
<div class="col">
<img class="cell" src="http://mooseloose.com/images/moose.png">
</div>
</div>

<div class="row">
<div class="col">
<img class="cell" src="http://mooseloose.com/images/moose.png">
</div>
<div class="col">
<img class="cell" src="http://mooseloose.com/images/moose.png">
</div>
<div class="col">
<img class="cell" src="http://mooseloose.com/images/moose.png">
</div>
<div class="col">
<img class="cell" src="http://mooseloose.com/images/moose.png">
</div>
</div>

<div class="row">
<div class="col">
<img class="cell" src="http://mooseloose.com/images/moose.png">
</div>
<div class="col">
<img class="cell" src="http://mooseloose.com/images/moose.png">
</div>
<div class="col">
<img class="cell" src="http://mooseloose.com/images/moose.png">
</div>
<div class="col">
<img class="cell" src="http://mooseloose.com/images/moose.png">
</div>
</div>

<div class="row">
<div class="col">
<img class="cell" src="http://mooseloose.com/images/moose.png">
</div>
<div class="col">
<img class="cell" src="http://mooseloose.com/images/moose.png">
</div>
<div class="col">
<img class="cell" src="http://mooseloose.com/images/moose.png">
</div>
<div class="col">
<img class="cell" src="http://mooseloose.com/images/moose.png">
</div>
</div>

<div style="clear:both"></div>
</div>