SAPUI5中的布局和字段大小调整

Question

       我需要创建一个包含大量元素（表格，输入，表格等）的布局。我想确保每个元素在Mobile上调整大小。

var oLayout = new sap.ui.layout.Grid({
width : "100%",
content : [
    new sap.m.Input({
       value : "Text",
       editable : true,
       layoutData : new sap.ui.layout.GridData({
          span : "L4 M8 S12",
          linebreak : true
       })
    }),
    new sap.m.Button({
      text : "Click"
    })
]}) 
oLayout.placeAt("content");

我希望输入字段在大屏幕上跨越4个部分，在中间跨越8个，在小屏幕上跨越12个。不幸的是，这些似乎不起作用。 甚至连线也似乎不起作用。 我甚至尝试使用垂直布局来克服换行符，但各种外形尺寸的跨度控制不起作用。 这是同一个JSBIN。
我似乎不了解布局原则。