媒体查询不适用于小分辨率

Question

大家好！ 上图显示在480px的屏幕上。低于480像素，图像开始合并，或者它们无法正常显示。 我想要的是，图像应该低于480px分辨率并开始垂直显示在一条线上。 为此，我试着写这样的媒体查询

@media only screen and (min-width : 320px) and (max-width : 480px) {

 .col-xs-6 
{
    position:relative;
    top:0;
    left:0;
}
}

但它不起作用或我不知道。 我将如何实现理想的行为？

HTML

            <div class=''>
            <div id='single_product' class='col-md-3 col-sm-4 col-xs-6'>

        <h3>$pro_title</h3> 

        <img src='admin_area/product_images/u_seller_product_img/$pro_img'  width='180' height='180' /> <br>

        <p><b>Price: $  $pro_price </b></p

        <a href='details.php?pro_id=$pro_id' style='float:left;'>Details</a>

        <a href='Home.php?add_cart=$pro_id'><button style=';'>Add To Cart</button></a> 


            </div>
            </div>