css - Bootstrap 如何避免最小宽度的分栏

Question

我有以下代码，我需要两列，并且我有这两列的最小宽度以支持移动浏览器。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="container">
    <div class="row">
        <div class="col-6" style="background-color: blue;min-width: 250px;">A</div>
        <div class="col-6" style="background-color: red;min-width: 250px;">B</div>
        <div class="col-12" style="background-color: green;min-width: 500px">
            C
        </div>
    </div>
</div>

当屏幕尺寸小于500px时，first div和second div去两行。但相反，我想让它们保持在同一行

它在小屏幕上的样子

它应该如何在小屏幕上。 (这是它在大屏幕尺寸下的样子)

---

我该如何解决这个问题？

谢谢

编辑

在我的真实代码中，我使用了 Bootstrap 顺序。所以在大屏幕上顺序是 A C B，但在小屏幕上是 A B C。所以我不能删除行类。

<meta name="viewport" content="width=device-width">应添加此标签以支持移动设备。

Answer 1

我试过你的代码，对我来说效果很好。您是否检查了可能导致此问题的任何其他外部标签？