Javascript 有什么想法可以改进这个UI架构吗？

我正在使用SAPUI5开发一个与以下类似的UI：

首先，我考虑如下构造XML视图：

<VerticalLayout>
  <HBox> FIELD1 & FIELD2 here </HBox>
  <HBox> FIELD3 & FIELD4 here </HBox>
  <Image> IMAGE here </Image>
</VerticalLayout>

这里是FIELD1和FIELD2
这里是第三和第四场
图像在这里

然而，我有点困惑，因为在桌面和平板电脑中查看输入字段时，我需要将输入字段的标签放在输入字段的顶部（如上图所示），但在较小的（智能手机）视口中查看页面时，它们必须堆叠在彼此的顶部：

---

是否有人对该观点的结构或使其具有响应性的想法提出建议？提前谢谢

您要搜索的是“网格”布局。

您可以设置“defaultSpan”属性，该属性是一种字符串类型，表示整个网格的大、中、小屏幕的网格默认跨度值。允许值由空格字母L、M或S分隔，后跟容器必须采用的从1到12的列数，例如：“L2 M4 S6”、“M12”、“s10”或“l4 M4”。请注意，必须按大-中-小顺序提供参数。默认值为L3 M6 S12

在您的情况下，类似于“L1 M2 S4”

检查您可以从中获得最多的信息

---

当然，别忘了结账

您尝试过响应式布局吗？我使用了Flex Box，它有点工作，但我仍然无法按照输入字段的方式定位标签。sap.ui.layout.form.ResponsiveGridLayout呢？