Responsive UI with new af:matchMediaBehavior in ADF 12.2.1.0

Jdeveloper and ADF 12.2.1 comes with many new features ( see these posts-
New look of dvt:funnelChart for Data Visualization in Jdeveloper 12.2.1.0
New look of dvt:pieChart as donut chart for Data Visualization in Jdeveloper 12.2.1.0  )
and supports responsive UI design.
Masonry Layout and MatchMediaBehaivor tag is introduced to support responsive UI design

af:matchMediaBehavior allows developer to control properties of components according to screen size. It uses CSS media queries to detect screen size and changes value of specified property of component

This tag has 3 properties

PropertyName- component property that you want to change
MatchedPropertyValue- value for that property
MediaQuery- to detect screen height, width, resolution etc

I have a table and form (2 rows layout) in my page surrounded by a horizontal panel group layout
It looks like this

Added two media tags in this structure

First one for panel group layout - if screen width is less than 700px then it's layout should be changed to vertical

<af:matchMediaBehavior matchedPropertyValue="vertical" mediaQuery="screen and (max-width: 700px)"
                                           propertyName="layout"/>

Second for panel form layout- if screen width is less than 900px then no. of rows should be changed to 4, means all input text will be in single column

<af:matchMediaBehavior matchedPropertyValue="4" mediaQuery="screen and (max-width: 900px)"
                                               propertyName="rows"/>

On running this application when i resized browser window and you can see all input components are arranged in single column as there is no more space (Second media behavior )

again resized browser window to be more narrow and panel group layout is vertical now (First media behavior)

Cheers :) Happy Learning