使引导程序 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 将右侧元数据推离左侧元数据。这很棒，因为几乎任何内容都可以流畅地运行到最大容量。

我遇到的问题是，在 Extra Small Screen 模式下，我需要颠倒元 div 的顺序，因此 SKU 首先出现，并使两个 div 的宽度均为 100%。

在超小屏幕模式下，倒序目前工作正常。但我无法将 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>