CSS Display Flex on Desktop and Mobile

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, labels and data will be a % based on the 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 the label and data to be 25% & 75% wide.

Not sure 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 advice, It would be great! Thanks!