Changing the Order of Fields on Gravity Forms Mobile View

This is one of those odd needs that maybe no one will ever have but I think it’s worth documenting because you can do it. Seeing possibilities helps change how you think. While this scenario might be unique, you might have a different odd need that’s close enough that this inspires some different thoughts around how to solve it.

Anyway, enough attempts at justification.

I’m taking the parallel practice Google forms/sheet and making it into a WordPress theme. I’m doing that because I’ll have a lot more control over the entire experience. One of the things I wanted to emphasize was the parallel nature of the logging so putting the two logging patterns side-by-side seems to make sense. Gravity Forms lets you do that very easily with drag/drop now.

The problem though was that in mobile view, the form fields end up sorting in a way that make sense. It just doesn’t work in this scenario. You can see that below.

So there were a number of things I might do to deal with this (and I still might do them) but I had a vague memory that I could set the sort order for flexbox and grid via CSS.

So I could do something in the CSS like this that applies only at screen sizes at 645px or below.

@media ( max-width: 645px ) {  
  #field_1_7, #field_1_8, #field_1_9, #field_1_10, #field_1_11 { 
  	order: 7; 
  	background-color: orange;
  }
}

That will place all those fields at the bottom of the form (and turn them orange).¹ It’s nice that I can choose order 7 and stack them all in order of appearance rather than having to number each ID (order: 8, order: 9 etc.).