Another very powerful addition to the responsive capabilities of ADF Faces in version 12.2.1 is the new af:matchMediaBehavior tag. It allows you to control almost every bit of your UI and change properties in response to changes in the viewport size.
Check out what it can do in this video:
Note that in the mediaQuery you can use other type of CSS media queries.
The code for the page in the demo is
<af:panelSplitter id="ps1" orientation="horizontal" splitterPosition="201"> <f:facet name="first"> <af:panelFormLayout id="pfl1" labelAlignment="start"> <af:matchMediaBehavior matchedPropertyValue="top" propertyName="labelAlignment" mediaQuery="screen and (max-width: 768px)"/> <af:inputText label="Label 1" id="it1"/> <af:inputText label="Label 2" id="it2"/> <f:facet name="footer"/> </af:panelFormLayout> </f:facet> <f:facet name="second"> <af:panelFormLayout id="pfl2" labelAlignment="start" rows="2"> <af:matchMediaBehavior matchedPropertyValue="top" propertyName="labelAlignment" mediaQuery="screen and (max-width: 900px)"/> <af:matchMediaBehavior matchedPropertyValue="4" propertyName="rows" mediaQuery="screen and (max-width: 800px)"/> <af:inputText label="Label 1" id="it3"/> <af:inputText label="Label 2" id="it4"/> <f:facet name="footer"/> <af:inputListOfValues label="Label 1" popupTitle="Search and Result Dialog" id="ilov1"/> <af:inputFile label="Label 1" id="if1"/> </af:panelFormLayout> </f:facet> <af:matchMediaBehavior matchedPropertyValue="vertical" propertyName="orientation" mediaQuery="screen and (max-width: 768px)"/> <af:matchMediaBehavior matchedPropertyValue="100" propertyName="splitterPosition" mediaQuery="screen and (max-width: 768px)"/> </af:panelSplitter>