Primefaces p:dataGrid:是否可以使用4-2-1列的网格布局？

我有一个4列的响应数据网格

<p:dataGrid value="#{myController.objList}" var="obj" layout="grid" columns="4">

    <p:outputPanel>
      <h:outputText value="Label 1: " />
      <h:outputText value="#{obj.field1}" />
    </p:outputPanel>

    <p:outputPanel>
      <h:outputText value="Label 2: " />
      <h:outputText value="#{obj.field2}" />
    </p:outputPanel>

</p:dataGrid>

当DataGrid从4列切换到1列时，它取决于屏幕宽度约640px。我的意图是，根据屏幕宽度，首先从4列切换到2列，然后从2列切换到1列，就像PrimeFaces GridCSS一样

这在DataGrid中是可能的吗？ 我可以使用媒体查询更改CSS吗？ 是否可以将ArrayList集成到GridCSS中？

---

使用媒体查询更改dataGrid样式的类可以使其按要求工作

.ui-grid-row {
    display: flex;
    flex-wrap: wrap;
}

@media screen and (max-width: 640px) {
    .ui-datagrid-column {
        width: 100% !important;
    }
}
@media screen and (min-width: 641px) and (max-width: 1024px) {
    .ui-datagrid-column {
        width: 50% !important;
    }
}
@media screen and (min-width: 1025px) {
    .ui-datagrid-column {
        width: 25% !important;
    }
}

---

1：你试过了吗？2：你试过了吗？3：不知道你是什么意思。。。