html - 使bootstrap 4在xs屏幕模式下显示flex子div宽度100%

Question

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

理想情况下，我不想将当前代码转换为列，因为 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 是全 Angular 的。

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