使引导程序4在xs屏幕模式下显示flex子div宽度100％

Question

我在产品页面标题中包含元数据的div上使用flex。

理想情况下，我不希望将当前代码转换为列，因为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将右图元推离左图元。这很棒，因为几乎所有内容都可以使流量达到最大容量。

我遇到的问题是，在“超小屏幕” 模式下，我需要反转元div的顺序，因此SKU首先出现，并使两个div的宽度均为100％。

在超小屏幕模式下，反向顺序当前运行良好。但是我不能使div宽度为100％。

请参见下面的模拟屏幕截图，了解我如何在超小屏幕模式下查看它。

如您在上面的模拟屏幕截图中所见，顺序相反，div为全角。

但是我似乎无法在我的代码中重新创建它，在父div中使用width: 100%;时，.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>