title: make bootstrap 4 display flex child divs width 100% in xs screen mode
body: <p>I'm using flex on divs containing meta data in my header of my product page. </p>
  
  <p>I ideally don't wan't to convert my current code to columns because the beauty of flex is that it flexes to the content, rather than restricting the content.</p>
  
  <p>This is my current code below...</p>
  
  <pre><code>&lt;div class="h6 d-flex" id="product_meta"&gt;
  
     &lt;div class="order-sm-0 order-1" style="background:red;"&gt;
         Some categorys - tags - etc
     &lt;/div&gt;
  
     &lt;div class="ml-sm-auto text-sm-right order-sm-1 order-0 mb-sm-0 mb-1" style="background:cyan;"&gt;
         SKU #000000 - From £2.55
     &lt;/div&gt;       
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Full demo here: <a href="https://www.codeply.com/go/PKYh4oHvTC" rel="nofollow noreferrer">https://www.codeply.com/go/PKYh4oHvTC</a></p>
  
  <p>If you look at my screenshot below in <strong>Small Screen</strong> and up mode, I am using <code>ml-sm-auto</code> to push the right meta away from the left meta. This is great because pretty much any content can run fluid to the max capacity.</p>
  
  <p><a href="https://i.stack.imgur.com/me8zI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/me8zI.png" alt="enter image description here"></a></p>
  
  <p>The problem I have, is that in <strong>Extra Small Screen</strong> mode I need to reverse the order of the meta divs, so the SKU appears first, and make both divs 100% width.</p>
  
  <p>In <strong>Extra Small Screen</strong> mode, the reversing order is currently working fine. But I cant make the divs width 100%.</p>
  
  <p>See mocked screenshot below of how I need it to look in <strong>Extra Small Screen</strong> mode.</p>
  
  <p><a href="https://i.stack.imgur.com/b3nzx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/b3nzx.png" alt="enter image description here"></a></p>
  
  <p>As you can see in my mocked screenshot above, the order is reversed and the divs are fullwidth.</p>
  
  <p>But I cannot seem to recreate this in my code, <code>width: 100%;</code> does not effect divs in the normal block way when using <code>.d-flex</code> in the parent div.</p>
  
  <p>Can anyone advise?</p>
  
  <p><a href="https://www.codeply.com/go/PKYh4oHvTC" rel="nofollow noreferrer">https://www.codeply.com/go/PKYh4oHvTC</a></p>