Can I change the Sequence of Columns on a Form?

Question

In UI5, I am using ColumnLayout in my form to show a form that has several Form Containers with a bunch of fields on it. It is working fine; when I shrink it, it moves to a single column and looks good. However, when it is on a large screen and goes to 2 columns, the sequence of data is screwed up.

Here is my section of the XML view:

<f:Form xmlns:f="sap.ui.layout.form" editable="true">
  <f:layout>
    <f:ColumnLayout columnsM="2" columnsL="3" columnsXL="4" />
  </f:layout>
  <f:formContainers>
    <f:FormContainer title="Basic Data">
      <f:formElements>
        <f:FormElement label="Field 1">
          <f:fields>
            <Input maxLength="10" />
          </f:fields>
        </f:FormElement>
        <f:FormElement label="Field 2">
          <f:fields>
            <Input maxLength="100" />
          </f:fields>
        </f:FormElement>
        <f:FormElement label="Field 3">
          <f:fields>
            <Input maxLength="20" />
          </f:fields>
        </f:FormElement>
        <f:FormElement label="Field 4">
          <f:fields>
            <Input maxLength="20" />
          </f:fields>
        </f:FormElement>
      </f:formElements>
    </f:FormContainer>
  </f:formContainers>
</f:Form>

And this is what it looks like now:

with the columns in the following sequence:

Field 1    Field 4
Field 2
Field 3

I understand that it goes in newspaper-like sequence, but is there a way for it to instead show:

Field 1    Field 2
Field 3    Field 4

Answer 1

You'll have to use a different layout in that case. Here is an example with ResponsiveGridLayout: https://jsbin.com/topaleb/edit?js,output

^{Other screenshots: XL, S}