In cases where resizing elements doesn't suffice, are there ways to restructure the layout (in this case) the grids, based on the device accessing the page?

hello,

We are trying to dynamically assign sizing to datagrid, and its corresponding child elements, as we would like to show the grid on mobile devices. Please advise the correct method to begin creating this control.

Building HTML as a string is even more complicated.
My problem is that Titles on menu items are not unique and also in 2 languages.

It looks like this:
DC Invoice
   DUNS: 1
   DUNS: 2
   Templates:
      Templ A
      Templ B
DSD Invoice
   DUNS: 1   
   Templates:
      Templ C


And if I search for ‘Templates:’ it finds the first one and it is wrong.
Is there a way to search by something else? Not the title?
May be some unique ID?

To avoid using findItem?
 
To do something like this:

var just_added = ('#mm').menu('appendItem', {
                   text: 'Open'
               });
               
               ('#mm').menu('appendItem', {
                   parent: just_added,
                   text: 'Invoice'
               });

               var po = ('#mm').menu('appendItem', {
                   parent: just_added,
                   text: 'PO'
               });

               ('#mm').menu('appendItem', {
                   parent: po,
                   text: 'DSD'
               });

Thanks.