สอบถามเรื่องการย่อรูปแบบ responsive เวลาย่อแล้วเอารูปหลายๆรูปมาต่ออย่างไรครับ มีรูปตัวอย่าง

<style type="text/css">
#pic1 {
    float:left;
	width: auto!important;
}
#pic2 {
    float:left; 
width: auto!important;
}
#pic3 {
    float:left;  
height: auto!important;	
}
#pic4 {
    float:left;  
height: auto!important;	
}
</style>
<div class="col-md-12">
 <!--<div id='pic1'>DIV1</div>
<div id='pic2'>DIV2</div> -->
        	<div id="pic1"><img src="img/top1.jpg" class="img img-responsive" ></div>
			<div id="pic2"><img src="img/top2.gif" class="img img-responsive" ></div>
			<div id="pic3"><img src="img/top3.gif" class="img img-responsive" ></div>
			<div id="pic4"><img src="img/top4.gif" class="img img-responsive" ></div>


            <!--size 980 x 200px -->
</div>