html - 使 bootstrap 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%。

在Extra Small Screen 模式下，颠倒顺序目前工作正常。但我无法将 div 宽度设置为 100%。

请参阅下面的模拟屏幕截图，了解我需要它如何在超小屏幕 模式下显示。

正如您在我上面的模拟屏幕截图中所见，顺序颠倒并且 div 是全 Angular 的。

但我似乎无法在我的代码中重新创建它，width: 100%; 在使用 .d-flex 时不会以正常的 block 方式影响 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>