Responsive CSS table layout make one cell act like a row - html

Question

I have a layout design I was trying to accomplish via display:table-cell. This however may not be the best option, as it is causing me problems.
The desired outcome:
I wish that on smaller screens (less than 992px) to have a layout like so:
+----+----+
| | |
+----+----+
| |
+---------+
But then on larger screens (greater than 992px) to have this layout:
+--+--+--+
| | | |
+--+--+--+
The caveat is that they may not all have the same size content, and I want them to stretch vertically to all be the same height.
I am currently accomplishing this with :
.table {
width:100%;
display:table;
}
.cell {
display:table-cell;
width:50%;
position:relative;
padding:0px 10px;
border:1px solid #000;
}
My problem arises from the fact that in order to get the third cell to wrap around, I need to give it it's own row. But then, the cell will only spread to fit the first 50% (under the first cell) and not stretch 100%. This can be fixed by making the second row it's own table, but then, getting the two tables side-by-side at the right screen size is proving difficult as well.
If there is a better way to make the divs match height that would be ideal. I am using bootstrap, so using its grids would be easy, so long as I can make them all the same height.
Note: Faux columns do not work for my scenario as the backgrounds would not be appropriately colored/spaced.

Answer 1

You could simply use table-layout:fixed to ensure the cells to get equal width.
For the #media query part, use display:table-caption for the last cell, and set caption-side:bottom to specify the placement.
JSFiddle: http://jsfiddle.net/7kpcf46r/ (resize the output frame and see)
.table {
display: table;
table-layout: fixed;
border-collapse: collapse;
width: 100%;
}
.cell {
display: table-cell;
border: 1px solid red;
}
#media (max-width: 768px) {
.cell:last-child {
display: table-caption;
caption-side: bottom;
}
}
<div class="table">
<div class="cell">One Line</div>
<div class="cell">Two<br/>Lines</div>
<div class="cell">More<br/>Than two<br/>Lines</div>
</div>

Answer 2

You could use media queries to style contents based upon the width of the screen, for example, given the HTML:
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
The CSS:
/* Setting the defaults, to apply regardless of
screen width: */
html, body {
/* removing margin and padding, setting
font-size to 0 in order to prevent
new-lines creating space between sibling
elements: */
margin: 0;
padding: 0;
font-size: 0;
}
/* resetting the font-size for all descendants of
the body element: */
body * {
font-size: 16px;
}
div.cell {
/* border-box, causes the browser to include
the width of the borders and padding within
the assigned width of the element: */
box-sizing: border-box;
/* instead of table-cell, causing elements
to default to displaying side-by-side: */
display: inline-block;
/* the default behaviour is to show at
50% of the width of the parent (body)
element: */
width: 50%;
margin: 0;
padding: 0;
height: 40vh;
border: 2px solid #000;
}
/*
Note: in this demo I'm using screen widths of
of 600px (min/max) to demonstrate the
principles within the constraints of JS Fiddle's
limited viewport. In your project, obviously, use
your required width of 992px.
*/
/* in screen-widths less than 600px
the last-child has a width of 100%: */
#media all and (max-width: 600px) {
div.cell:last-child {
width: 100%;
}
}
/* in screen-widths greater than 600px
div.cell elements have a width of 33%
(including the last-child) to display
side-by-side across the viewport: */
#media all and (min-width: 600px) {
div.cell {
width: 33%;
}
}
JS Fiddle demo.
References:
CSS Media Queries.

Answer 3

You can do it like this:
http://jsfiddle.net/z1kwrm8p/2/
HTML:
<div class="table">
<div class="cell" id="c1">ABCD</div><!--
--><div class="cell" id="c2">EFGH</div><!--
--><div class="cell" id="c3">XYZ PQRS ABCD EFGH IJKL MNOP QRSTUVWXYZ</div>
</div>
CSS:
.table {
width:100%;
display:block;
background:#009933;
}
.cell {
display:inline-block;
width:50%;
}
#c1 {
background:#99ccff;
}
#c2 {
background:#ff9966;
}
#c3 {
width:100%;
background:#66FF66;
}
#media only screen and (max-width: 991px) {
/* rules that only apply for canvases narrower than 992px */
.table {
display:table;
}
.cell {
display:table-cell;
width:33.3%;
}
#c3 {
width:33.3%;
}
}