Responsive row of same-height elements breaks to two rows in small breakpoint - html

Question

I have 6 cells of data, in medium+ breakpoints, they are all in the same row and the same height; in the small breakpoint, there are 3 per row, and everything within the row is the same height.
I had initially tried to use display: table-cell;, and was able to achieve both scenarios separately, but the markup needed to change. Is there a way to make this approach work?
I know flexbox could be an option, but I cannot use it, as I need to support IE9.
Would like to solve this without the use of any JS.
tl;dr
3 cells in a row for small viewports
6 cells in a row for medium viewports
All cells in a row should be the same height
Dynamic height, based on content length
No JS - CSS/Markup only.
Support for IE9+.
Works in small breakpoint (3 per row):
.table {
display: table;
width: 100%;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
vertical-align: middle;
width: 16.66667%; /* 1/6 */
border: 1px solid #000;
text-align: center;
}
#media (max-width: 500px) {
.cell {
width: 33.33333%; /* 1/3 */
background: #eee; /* Just to see when the breakpoint is applied */
}
}
<div class="table">
<div class="row">
<div class="cell">Cell 1 Pellentesque pretium neque at lacinia faucibus.</div>
<div class="cell">Cell 2</div>
<div class="cell">Cell 3</div>
</div>
<div class="row">
<div class="cell">Cell 4</div>
<div class="cell">Cell 5</div>
<div class="cell">Cell 6 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu ornare mi. Ut convallis suscipit sapien, at feugiat tellus commodo nec.</div>
</div>
</div>
Works in medium+ breakpoints (6 per row):
.table {
display: table;
width: 100%;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
vertical-align: middle;
width: 16.66667%; /* 1/6 */
border: 1px solid #000;
text-align: center;
}
#media (max-width: 500px) {
.cell {
width: 33.33333%; /* 1/3 */
background: #eee; /* Just to see when the breakpoint is applied */
}
}
<div class="table">
<div class="row">
<div class="cell">Cell 1 Pellentesque pretium neque at lacinia faucibus.</div>
<div class="cell">Cell 2</div>
<div class="cell">Cell 3</div>
<div class="cell">Cell 4</div>
<div class="cell">Cell 5</div>
<div class="cell">Cell 6 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu ornare mi. Ut convallis suscipit sapien, at feugiat tellus commodo nec.</div>
</div>
</div>

Answer 1

Since its a tabular data I would suggest to go with Table...
.table {
width: 100%;
border-collapse: collapse;
}
.cell {
width: 16.66667%;
border: 1px solid #00F;
text-align: center;
}
#media (max-width: 500px) {
.cell {
width: 33.33333%; /* 1/3 */
background: yellow; /* Just to see when the breakpoint is applied */
}
}
<table class="table" >
<tr class="row">
<td class="cell">Cell 1 Pellentesque pretium neque</td>
<td class="cell">Cell 2</td>
<td class="cell">Cell 3</td>
</tr>
<tr class="row">
<td class="cell">Cell 4</td>
<td class="cell">Cell 5</td>
<td class="cell">Cell 6 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu ornare mi. Ut convallis suscipit sapien, at feugiat tellus commodo nec.</td>
</tr>
</table>
jsFiddle

Answer 2

If I understood correctly this is what you want to achieve... here I am using bootstrap listGrid concept to achieve this.
.cell {
border: 1px solid #000;
text-align: center;
height: 200px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="table">
<div class="cell col-xs-4 col-sm-2">Cell 1 Pellentesque pretium neque at lacinia faucibus.</div>
<div class="cell col-xs-4 col-sm-2">Cell 2</div>
<div class="cell col-xs-4 col-sm-2">Cell 3</div>
<div class="cell col-xs-4 col-sm-2">Cell 4</div>
<div class="cell col-xs-4 col-sm-2">Cell 5</div>
<div class="cell col-xs-4 col-sm-2">Cell 6 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu ornare mi. Ut convallis suscipit sapien, at feugiat tellus commodo nec.</div>
</div>
Note1: If in case you do not want to use bootstrap let me know, I can find some other solution.
Note2: Bootstrap has pre-define values in pexels for devices, and if you want to change as per your need you can at http://getbootstrap.com/customize/