CSS Display: Flex on Desktop and Mobile - css

Question

I'm newer to using FLEXBOX and have a question on a layout using Desktop and Mobile.
I'm displaying info using a label and data (not on a form).
On the desktop, I'd like it to display like this:
label-------label-------label------label
Data--------Data--------Data-------Data
On a desktop, label and data will be a % based on number of elements.
But, on a mobile, I'd like it to display like this:
label------
Data-------
Label------
Data-------
label------
data-------
Label------
Data-------
label------
data-------
On mobile, I'd like label and data to be 25% & 75% wide.
Not sure on the HTML if it should be laid out like this
<div class="container">
<div class="label">Label</div>
<div class="data">Data</a>
<div class="label">Label</div>
<div class="data">Data</a>
<div class="label">Label</div>
<div class="data">Data</a>
</div>
OR
<div class="container">
<div class="label">label</div>
<div class="label">label</div>
<div class="label">label</div>
</div>
<div class="container">
<div class="data">data</div>
<div class="data">data</div>
<div class="data">data</div>
</div>
Any guidance would be great!
Thanks!

Answer 1

It sounds like you're flexible on the HTML structure.
I recommend grouping data pairs with parent elements, making columns and rows.
With two nested flexboxes, you can change flex-direction as desired.
/* FOR DEMO PURPOSES */
var $body = $('body');
$('button').on('click', function() {
$body.toggleClass('small');
});
.container {
display: flex;
flex-wrap: wrap;
background-color: lightgreen;
}
.group {
display: flex;
flex-direction: column;
}
.item {
padding: .25em .5em;
}
#media (min-width: 700px) {
.container {
background-color: lightblue;
flex-direction: column;
}
.group {
flex-direction: row;
}
}
/* FOR DEMO PURPOSES */
.small .container {
background-color: lightblue;
flex-direction: column;
}
.small .group {
flex-direction: row;
}
button {
position: absolute;
top: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="group">
<div class="item label">Label 1</div>
<div class="item data">Data 1</div>
</div>
<div class="group">
<div class="item label">Label 2</div>
<div class="item data">Data 2</div>
</div>
<div class="group">
<div class="item label">Label 3</div>
<div class="item data">Data 3</div>
</div>
</div>
<button>Simulate Size Change</button>
Here's a demo with more than one row of data:
/* FOR DEMO PURPOSES */
var $body = $('body');
$('button').on('click', function() {
$body.toggleClass('small');
});
.container {
display: flex;
flex-wrap: wrap;
background-color: lightgreen;
}
.group {
display: flex;
flex-direction: column;
}
.item {
padding: .25em .5em;
}
.label {
font-weight:bold;
}
.flag {
color:red;
}
#media (min-width: 700px) {
.container {
background-color: lightblue;
flex-direction: column;
}
.group {
flex-direction: row;
}
}
/* FOR DEMO PURPOSES */
.small .container {
background-color: lightblue;
flex-direction: column;
}
.small .group {
flex-direction: row;
}
button {
position: absolute;
top: 130px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="group">
<div class="item label">Label 1</div>
<div class="item data">Data 1a</div>
<div class="item data flag">Data 1b</div>
<div class="item data">Data 1c</div>
</div>
<div class="group">
<div class="item label">Label 2</div>
<div class="item data">Data 2a</div>
</div>
<div class="group">
<div class="item label">Label 3</div>
<div class="item data">Data 3a</div>
<div class="item data">Data 3b</div>
</div>
</div>
<button>Simulate Size Change</button>
For more ideas, I highly recommend reading Accessible, Simple, Responsive Tables # CSS-Tricks and checking out the other resources listed there.

Answer 2

I would order them like the first option. Then, at desktop view I'd make a flex flow of column wrap, set a height for the container and set each flex-item to be 50% height.
On mobile, id switch to flex-flow: row wrap, and define the container's width, then each child at 25%/75% depends on which child.
HTML:
<div class="container">
<div class="label">Label</div>
<div class="data">Data</a>
<div class="label">Label</div>
<div class="data">Data</a>
<div class="label">Label</div>
<div class="data">Data</a>
</div>
CSS:
.container {
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
align-items: center;
height: 500px; // what ever you want here
}
.label, .data {
height: 45% // Less than 50% for margins, etc.
}
#media only screen and (max-width: 900px) { //Set desired width to call 'mobile'
.container {
flex-flow: row wrap;
width: unset;
height: 500px; //Whatever you want again
}
.data {
width: 70%;
}
.label {
width: 22%;
}
}