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.

Parallel logging fields shown side by side in desktop view.

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.
Screenshot showing how the mobile view ends up creating duplicate feeling fields when it resizes.

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).1 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.).

Form example showing how the sort order changed.

1 I often add a background color to things I’m experimenting with. It helps me quickly make sure I’m succeeding in getting the right piece of HTML even if the more complex stuff might be failing.