Bootstrap thumbnails too small on mobile - html

Question

I have a set of Bootstrap thumbnails on my web page and I have set all the images with class .img-responsive. When I open the page on a mobile browser the thumbnails are appearing too small and I can't even resize them with css.
Here are my thumbnails:
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/thumbnails/traditional.jpg" class="img-rounded img-responsive" alt="...">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/thumbnails/mehndi.jpg" class="img-rounded img-responsive" alt="...">
</a>
</div>
... altogether 12 thumbnails
</div>
I have tried to edit the size of the thumbnails for mobile phone size devices with the following media query:
#media(max-width:767px){
.thumbnail > img {
height:70px;
width:120px;
}
}
However the width doesn't seem to surpass 80px, it seems like I can only set width up to around 80px and anything higher won't do anything.
If I leave the thumbnails like they are without trying the above CSS code they appear too small on mobile devices and I need a way to increase the size of the thumbnails on mobile devices only.
Here is a link to the site:

Answer 1

Change col-xs-6 to col-xs-12
So instead of
<div class="col-xs-6 col-md-3">
You'll have
<div class="col-xs-12 col-md-3">
This will make it so that each thumbnail will take up the full width of the phone, instead of having two across.

Answer 2

I have fixed the problem, I found that I had the below code elsewhere in my CSS that I didn't take notice of. This below media query was what made my images appear so small on mobile devices, I took it out and now images appear fine. Thanks for the help guys.
#media(max-width:767px){
.thumbnail > img {
height:40px;
}
}