Responsive containers - tpl

[bressi]

Hello everyone,

I am looking for a solution to make some 'hboxed' containers look responsive when the viewport is getting smaller in width.

I have already added an 'onresize' event listeners where I increase the height of my container in order to let the containers flows sequentially in the space below but the containers stay on the same line and they do not behave as responsive as I am looking for.

Ext.define('MyApp.widgets.myItemsContainer', {
    
    extend: 'Ext.container.Container',
    
    xtype: 'myitemscontainer',
    
    layout: 'hbox',
    
    itemId: 'myItemsContainer',
    
        items: [
                {
                    xtype: 'container',
                    flex: 1,
                    cls: 'fw-inline',
                    tpl: '<div class="prezziqta-label">Prezzo minimo</div><tpl if="p1 != null"><div class="prezziqta-data">{p1} €</div><tpl else><div class="prezziqta-data">-</div></tpl>'
                },
                {    xtype: 'container',
                    flex: 1,
                    cls: 'fw-inline',
                    tpl: '<div class="prezziqta-label">Prezzo netto</div><tpl if="p2 != null"><div class="prezziqta-data">{p2} €</div><tpl else><div class="prezziqta-data">-</div></tpl>'
                },
                {
                    xtype: 'container',
                    flex: 1,
                    cls: 'fw-inline',
                    tpl: '<div class="prezziqta-label">Valore IVA</div><div class="prezziqta-data">{p3} %</div></div>'
                },
                {
                    xtype: 'container',
                    flex: 1,
                    cls: 'fw-inline',
                    tpl: '<div class="prezziqta-label">Prezzo listino</div><tpl if="p4 != null"><div class="prezziqta-data">{p4} €</div><tpl else><div class="prezziqta-data">-</div></tpl>'
                },
                {
                    xtype: 'container',
                    flex: 1,
                    cls: 'fw-inline',
                    tpl: '<div class="prezziqta-label">Saldo</div><tpl if="p5 != null"><div class="prezziqta-data">{p5} €</div><tpl else><div class="prezziqta-data">-</div></tpl>'
                },
                {
                    xtype: 'container',
                    flex: 1,
                    tpl: '<div class="prezziqta-label">Prezzo vendita</div><tpl if="p6 != null"><div class="prezziqta-data">{p6} €</div><tpl else><div class="prezziqta-data">-</div></tpl>',
                    cls: 'fw-inline'
                }
            ]
});

My goal would be to have some of the inner containers placed below some of the other containers [e.g. 3 containers below the first 3 containers].

Below I've also added some screenshots showing the container before and after the resize event.

Any hint for a solution is appreciated.
Btw I am coding on SA 3.5.1 - EXT v6.0.1 - Classic

Regards,
Claudia