Html 使bootstrap 4在xs屏幕模式下100%显示flex子分区宽度

我在产品页面标题中包含元数据的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>

一些类别-标签-等
SKU#000000–从2.55英镑起

完整演示如下：

如果您在小屏幕和向上模式下查看我下面的屏幕截图，我将使用

ml-sm-auto

将右元推离左元。这很好，因为几乎任何内容都可以以最大容量运行

我遇到的问题是，在超小屏幕模式下，我需要颠倒meta div的顺序，因此SKU首先出现，并使两个div的宽度都达到100%

在超小屏幕模式下，反转指令当前工作正常。但是我不能让div的宽度达到100%

请参阅下面的模拟屏幕截图，了解我需要它在超小屏幕模式下的外观

正如你在我上面的模拟屏幕截图中看到的，顺序颠倒了，div是全宽的

但我似乎无法在我的代码中重现这一点，

width:100%.d-flex

时，code>不会以正常块方式影响div

有人能提供建议吗

---

下面的代码结束了对我遇到的问题的排序，在mobile中使用了

.flex column

，在小屏幕和更高版本中使用了

.flex sm grow

这是我的产品标题

一些类别-标签-等
SKU#000000–从2.55英镑起

感谢您昨天的帮助