сделать начальную загрузку 4 отображать flex дочерние divs ширина 100% в режиме экрана xs

Question

Я использую flex для div, содержащих метаданные в заголовке моей страницы продукта.

В идеале я не хочу преобразовывать мой текущий код в столбцы, потому что прелесть flex в том, что он изгибается к контенту, а не ограничивает его.

Это мой текущийкод ниже ...

<div class="h6 d-flex" id="product_meta">

   <div class="order-sm-0 order-1" style="background:red;">
       Some categorys - tags - etc
   </div>

   <div class="ml-sm-auto text-sm-right order-sm-1 order-0 mb-sm-0 mb-1" style="background:cyan;">
       SKU #000000 - From £2.55
   </div>       

</div>

Полная демонстрация здесь: https://www.codeply.com/go/PKYh4oHvTC

Если вы посмотрите на мой скриншот ниже в режиме Маленький экран и выше, я используюml-sm-auto чтобы оттолкнуть правую мету от левой мета.Это здорово, потому что практически любой контент может работать с максимальной емкостью.

Проблема, с которой я столкнулся, заключается в том, что в Extra SmallРежим экрана Мне нужно изменить порядок мета-дивов, чтобы сначала отображался SKU, и сделать оба деления шириной 100%.

В Режим Extra Small Screen , реверсзаказ в настоящее время работает нормально.Но я не могу сделать ширину div'ов 100%.

Смотрите смоделированный скриншот ниже, как мне нужно, чтобы он выглядел в режиме Extra Small Screen .

Как вы можете видеть на моем смоделированном скриншоте выше, порядок полностью изменен, а div имеют полную ширину.

Но я не могу воссоздать это в моем коде, width: 100%;не действует на div обычным блочным способом при использовании .d-flex в родительском div.

Кто-нибудь может посоветовать?

https://www.codeply.com/go/PKYh4oHvTC

Answer 1

Приведенный ниже код завершил сортировку проблемы, с которой я столкнулся, используя .flex-column на мобильном телефоне и .flex-sm-grow на маленьком экране и выше.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<main class="container">
  <div id="product_header">

    <h1 class="h2">This is my product title heading</h1>
    <hr/>
    <div class="h6 d-flex flex-column flex-sm-row" id="product_meta">
      <div class="order-sm-0 order-1" style="background:red;">
        Some categorys - tags - etc
      </div>
      <div class="text-sm-right order-sm-1 order-0 flex-grow-1 mb-sm-0 mb-1" style="background:cyan;">
        SKU #000000 - From £2.55
      </div>
    </div>
  </div>
</main>