在小屏幕上渲染时，多维数据集的尴尬形状

Question

我正在堆叠一系列小div以显示一系列统计数据。问题是要在手机上正确显示它们。您能为我推荐一个替代方案吗？值得注意的是，该设计来自管理模板。

这是您在更大的屏幕上看到的内容：

以下是使用手机时显示多维数据集的方式：

<div class="col-2">
            <div class="bg-success p-10 text-white text-center">
                <i class="fas fa-warehouse m-b-5 font-16"></i>
                <h5 class="m-b-0 m-t-5">414</h5>
                <small class="font-light">Bodega stock</small>
            </div>
    </div>

我已经阅读了有关响应式排版的信息，但是我不确定应该如何进行。

Answer 1

从设计师的角度来看，我认为您应该做的是使底部的列成为行，因此，在移动设备中，它们的宽度都应与蓝色框的宽度相同。

使用Bootstrap 4，这应该非常容易，您的col div将是：

<div class="col-xs-6 col-sm-4> ... </div>

类似的东西。

Answer 2

我认为您有两种选择：

• 在大屏幕上并排显示“总不合格”和“全部可逆”，但在响应时彼此并排显示，可以使用flexbox

• 就像上面的同伴一样，在列中显示绿色，黑色和黄色的div，宽度设置为100％