aidood.com">
A:
You can achieve this by keeping all your img elements in a single div and floating them appropriately, see the snippet below:
img {
width: 10%;
}
.col-md-3 {
float: left;
width: 33.3%;
height: 200px;
background-size: cover;
background-repeat: no-repeat;
padding: 0 0 20px 0;
overflow: hidden;
}
.img_list {
background-image: url('imgs/1.jpg');
background-size: cover;
}
.img_list1 {
background-image: url('imgs/2.jpg');
background-size: cover;
}
.img_list2 {
background-image: url('imgs/3.jpg');
background-size: cover;
}
.img_list3 {
background-image: url('imgs/4.jpg');
background-size: cover;
}
@media only screen and (max-width: 600px) {
img {
width: 100%;
}
.col-md-3 {
float: none;
width: 100%;
height: 150px;
background-size: cover;
background-repeat: no-repeat;
padding: 0 0 20px 0;
overflow: hidden;
}
.img_list {
background-image: url('imgs/1.jpg');
background-size: cover;
}
.img_list1 {
background-image: url('imgs/2.jpg');
background-size: cover;
}
.img_list2 {
background-image: url('imgs/3.jpg');
background-size: cover;
}
.img_list3 {
background-image: url('imgs/4.jpg');
background-size: cover;
}
}
I am using background images because I could not have uploaded the images here as I do not have 10 reputation points but instead I have used an image that I saved on my system.
Edit: I have created an example using your code. Here is a JSFiddle example of the same.
Note: One more thing to note is that when you use background-image you need to specify the width and height for the element.
