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