Responsive 5 div elements CSS, one by one - html

Question

I have trouble with 5 div elements to make it responsive.
I have this this div elements like this:
<div class="AllCont">
<div class="ContQuint">
<div>Here Image 1</div>
</div>
<div class="ContQuint">
<div>Here Image 2</div>
</div>
<div class="ContQuint">
<div>Here Image 3</div>
</div>
<div class="ContQuint">
<div>Here Image 4</div>
</div>
<div class="ContQuint">
<div>Here Image 5</div>
</div>
</div>
The style CSS like this:
.AllCont {
display: table;
border-collapse : collapse;
width: 100%;
}
.ContQuint {
display: table-cell;
width: 20%;
}
And trying to do it responsive with this in CSS:
#media only screen and (max-width:1540px) {
.ContQuint {
display: table-row;
}
}
But i dontk want that. I want something like this:
| Elem 1 - Elem 2 - Elem 3 - Elem 4 - Elem 5 |
Then when the screen size decreases a little bit I want this:
| Elem 1 - Elem 2 - Elem 3 - Elem 4 |
| Elem 5 |
Then when decreases more:
| Elem 1 - Elem 2 - Elem 3 |
| Elem 4 - Elem 5 |
Then a little more:
| Elem1 - Elem 2 |
| Elem 3 - Elem 4 |
| Elem 5 |
And Finally:
| Elem 1 |
| Elem 2 |
| Elem 3 |
| Elem 4 |
| Elem 5 |
How can i do that with CSS or javascript?

Answer 1

I think what you're looking for is display: inline-block;! Plus display: block on the parent .AllCont element. Tables used to be useful for this kind of layout, but these days you'll have a better time checking flexbox (or even CSS grid) for something more sophisticated.

Answer 2

Should probabliy take a look into responsive layout, this will help you a lot understanding different patterns.
Responsive patterns by google
Either way i recommend the use of flexboxes or inline/block elements.
Solution using flexboxes :
.AllCont {
display: flex;
flex-direction: row;
flex-wrap: wrap;
border-collapse : collapse;
width: 100%;
}
.ContQuint {
width: 200px;
}
<div class="AllCont">
<div class="ContQuint">
<div>Here Image 1</div>
</div>
<div class="ContQuint">
<div>Here Image 2</div>
</div>
<div class="ContQuint">
<div>Here Image 3</div>
</div>
<div class="ContQuint">
<div>Here Image 4</div>
</div>
<div class="ContQuint">
<div>Here Image 5</div>
</div>
</div>
Solution using inline and block elements
.AllCont {
display: block;
border-collapse : collapse;
width: 100%;
}
.ContQuint {
display: inline-block;
width: 200px;
}
<div class="AllCont">
<div class="ContQuint">
<div>Here Image 1</div>
</div>
<div class="ContQuint">
<div>Here Image 2</div>
</div>
<div class="ContQuint">
<div>Here Image 3</div>
</div>
<div class="ContQuint">
<div>Here Image 4</div>
</div>
<div class="ContQuint">
<div>Here Image 5</div>
</div>
</div>
Hope this helps :)

Answer 3

Rather than giving a % width for .ContQuint, give a fixed width. otherwise the width reduces with screen width.
fiddle showing it
.ContQuint {
display: inline-block;
width: 150px;
}

Answer 4

Flexbox does this with flex-wrap: wrap;
.AllCont {
display: flex;
flex-wrap: wrap;
}
.ContQuint {
}
<div class="AllCont">
<div class="ContQuint">
<div>Here Image 1</div>
</div>
<div class="ContQuint">
<div>Here Image 2</div>
</div>
<div class="ContQuint">
<div>Here Image 3</div>
</div>
<div class="ContQuint">
<div>Here Image 4</div>
</div>
<div class="ContQuint">
<div>Here Image 5</div>
</div>
</div>

Answer 5

You may use flex, width + flex-wrap and min-width to spare a mediaquerie.
.AllCont {
display: flex;
flex-wrap: wrap;
}
.ContQuint {
width: 20%;
/* optionnal*/
min-width: 300px;/* this is alike your breaking point ... each 300px or else value you set */
padding: 1px;
box-sizing:border-box;
}
img {
/* optionnal*/
display: block;
width: 100%;
}
<div class="AllCont">
<div class="ContQuint">
<div>
<img src="http://dummyimage.com/300x200">
</div>
</div>
<div class="ContQuint">
<div>
<img src="http://dummyimage.com/300x200"> </div>
</div>
<div class="ContQuint">
<div>
<img src="http://dummyimage.com/300x200"> </div>
</div>
<div class="ContQuint">
<div>
<img src="http://dummyimage.com/300x200"> </div>
</div>
<div class="ContQuint">
<div>
<img src="http://dummyimage.com/300x200"> </div>
</div>
</div>
pen to play with