Html 如何实现不同屏幕的不同div顺序和定位（使用引导）？

我有许多div元素，我想组织它们，如下所示。我使用的是Bootstrap4，但不知道如何实现这一点。 对于大屏幕，我想为a、B、C、D和E指定一个最大宽度，应使用剩余宽度。对于小型显示器，它们都应使用全宽

可选：如果可能，我希望A、B、C、D适合它们的内容，并为E指定最小宽度。如果E没有足够的空间，则应使用“小显示”布局

---

引导使用12列布局。可以为每个div指定多个类来定义其宽度

col类还可以通过添加例如col-md-12（用于中屏幕）或col-xl-12（用于大屏幕）来定义不同媒体查询的宽度

完整文档如下所示：

您必须尝试使用不同的值，直到div按您想要的顺序运行

---

如果这不起作用，您可以在css中结合媒体查询使用边距。

您可以对桌面和移动设备（或您想要的任何断点）使用基本引导布局。您可以在使用

显示：内容时使用
flex
和
order

属性
order
具有
。引导中的order-X
类更改
flex
中元素的顺序。Display
contents
从可访问性树中删除元素-因此它使父级
div
看起来不存在-并使其子级看起来直接在flex和orderable中

类似这样的内容（与图像匹配的输出）：


.d-contents{
显示：内容；
}

A.
B
C
D
E
问题在于，如果我按A-B-E-C-D顺序定义它们，那么我认为在大屏幕上，C的顶部将与E的底部对齐。我还认为A、B、C、D可能需要一个外部div，以使它们的宽度相同，因此E实际上不适合那里。谢谢，工作非常完美。我怀疑这是因为“可选”部分而关闭的？我觉得这里的判断可能有点难。作为一名引导新手，我无法判断div width设置是否是一个独立的问题，因此我决定最好包含一个关于我最终实际尝试实现的内容的描述。