Responsive CSS Sprites in Bootstrap - html

Question

I have a sprite image that I want to use. I can get everything working the way I want on desktop size monitor, but on smaller screen sizes, things go bad and the sprites do not respond.
Here is a codepen of what I currently have.
I tried playing about with:
background-size: options
background-clip: options
But still couldn't get it to work. My HTML is:
<div class="row">
<div class="col-md-2 orange">
<div class="img-wrap"></div>
<h2>item-01</h2>
</div>
<div class="col-md-2 blue">
<div class="img-wrap"></div>
<h2>item-02</h2>
</div>
<div class="col-md-2 orange">
<div class="img-wrap"></div>
<h2>item-03</h2>
</div>
<div class="col-md-2 blue">
<div class="img-wrap"></div>
<h2>item-04</h2>
</div>
<div class="col-md-2 orange">
<div class="img-wrap"></div>
<h2>item-05</h2>
</div>
<div class="col-md-2 blue">
<div class="img-wrap"></div>
<h2>item-06</h2>
</div>
</div>
And the CSS is:
.img-wrap {
width: 100%;
height: 145px;
margin: 0 auto;
background-image: url('http://oi57.tinypic.com/15qtcv7.jpg');
background-repeat: no-repeat;
background-color: transparent;
}
.orange .img-wrap {
background-position: 0px 0px;
}
.blue .img-wrap {
background-position: -155px 0px;
}
.col-md-2 h2 {
text-align: center;
}
Is there a way I can make sprite responsive? I tried Google, but nothing I found did it for me