Switching Field Layout from 3 to 2 Columns Responsively

I have a form with a 3-column layout for a set of checkboxes. As the screen size narrows, the text for each option starts to get hidden behind ellipses, but it maintains the 3-column layout until it finally switches to single-column at mobile sizes. I’d like to set a breakpoint to force the layout to 2-column to prevent the text from getting hidden. How can I do that? Screenshots below.

@media only screen and (max-width:675px) {
// code goes here
}

I appreciate the response, but it’s the “code goes here” that I need. I used a ready class to format the columns in the first place, but I can’t switch the class with a media query, so I need to find a way to force the column layout change.

Custom CSS for Gravity Forms

Might want to check out this gig.

© 2008 - 2021. Gravity Forms is a project by Rocketgenius Inc.