How to create resettable grids, tables, or columns
I want to display data in 2 columns. When there is enough space, the data should look like this:
| data | data2 |
| data3 | data4 |
| data5 | data6 |
If the user resizes the window so there is no room to display two columns, I want the data to look like this:
| data |
| data2 |
| data3 |
| data4 |
| data5 |
| data6 |
If I had to guess that there are already questions and posts on the internet about this, but I don't know what to look for. Links, tips, sample code and guides are welcome!
source to share
If you don't need to support IE9 and below, you can use display: flex
.items {
display: flex;
flex-flow: row wrap;
width: 100%;
}
.item {
flex-basis: 50%;
}
@media only screen and (max-width: 767px) {
.item {
flex-basis: 100%;
}
}
<div class="items">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
</div>
source to share
How about something like this?
http://jsfiddle.net/LcsgtaLv/1/
The problem is that you will need to decide at what size the "break" will occur (at what size the table will start to be mapped to 2 columns), as we do:
@media screen and (min-width: 700px) {
Basically we let them get 100% width up to 700px, from there we close them down to 49% - 2px (from outside, if there was no border, we could only do 50%).
Hope it helps.
source to share
In this example, you can use a table (semantically appropriate for displaying tabular data). On smaller devices, you can change the display layout of the cells to be a block and not their original table layout.
Below is an example. It will change one column if the screen is below 400px (which can be customized).
Here's the fiddle: http://jsfiddle.net/vz6nLj8a/1/
.responsive-table td {
display: block;
border: 1px solid;
border-width: 0 1px;
padding: .5em 1em;
}
@media (min-width: 400px) {
.responsive-table td {
display: initial;
border-right-width: 0px;
}
.responsive-table td:last-child {
border-right: 1px solid;
}
}
<table class="responsive-table" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>data1</td>
<td>data2</td>
</tr>
<tr>
<td>data3</td>
<td>data4</td>
</tr>
<tr>
<td>data5</td>
<td>data6</td>
</tr>
</tbody>
</table>
source to share