OutSystemsUIのAdaptiveフォルダには、Columnで始まるBlockがいくつかあります。
このBlock内に配置したコンテンツは、狭い画面では自動的に表示方法を調整してくれます。
その仕組みを調べてみました。

環境

Personal Environment(Version 11.0.606.0)
Service Studio(Version 11.6.21)
OutSystemsUI(Version 2.2.7)

Adaptive Pattern

OutSystemsのUIにおけるAdaptive Patternは、端末の種類(PC、タブレット、スマートフォン)に応じて表示方法を変えられるBlockです。

以下のように、Input Parameterに、タブレットのときの表示方法、スマートフォンのときの表示方法を指定します。

Static Entity BreakColumnsの値で設定します。

端末の判別

OutSystemsUIのClient Acction GetDeviceTypeで、"phone"/"tablet"/"desktop"のいずれかが帰ります。

この値は、bodyタグについたclassから取得しています。

このclassはどこで設定されているかというと、Silk UI(Version 10)のときの資料に記載がありました(下の参考リンク参照)。

ページ初期表示時点でJavaScriptが動いて端末の種類や画面幅を取得し、CookieやSessionに保持されるようです。サーバからHTMLページとしてレンダリングされるときに、取得した値から端末の種類をclassに書き込む仕組み。

実行イメージ

Column3 を使って、タブレットならBreakColumns.Middle、スマートフォンなら、BreakColumns.Allを設定します。Column3のそれぞれに、Containerをおいて、各Columnがどこで折り返されているかを確認します。
端末種別のシミュレーションには、Chromeの開発者ツールのdevice toolbarを使っています。

desktop(PCサイズ)

table(タブレットサイズ)

phone(スマートフォンサイズ)

動作の仕組み

Column3は、実行時に以下のタグとして出力されます。

<div data-container="" class="columns columns3 gutter-base tablet-break-middle phone-break-all ">

TableBehaviorに設定したEntities.BreakColumns.Middleがclass tablet-break-middleに、PhoneBehaviorに設定したEntities.BreakColumns.Allがclass phone-break-allとして出力されます。

OutSystemsUIが提供するCSSの設定で、このclassをつけたColumns Patter内の各列の幅等を指定して折返しを実現しています。

参考リンク

古い(バージョン10時のUI Framework Silk UI向け)ですが、
Columns Responsive Behavior