Profile: Jeffrey

Problem: I would like to arrange my CRED form checkboxes into multiple columns. I would like the number of columns to be dynamic based on the screen size, using media queries.

Solution:
There is not a way to apply different CSS classes to each checkbox, or to wrap some checkboxes in container elements. Instead, you can use CSS columns and media queries:

.wpt-form-set-checkboxes.wpt-form-set-checkboxes-wpcf-sport {
    columns: 2;
}
 
@media screen and (min-width: 960px) {
       .wpt-form-set-checkboxes.wpt-form-set-checkboxes-wpcf-sport {
         columns: 4;   
      }
}
 
.wpt-form-set-checkboxes.wpt-form-set-checkboxes-wpcf-sport li {
    display:block;
}    

Relevant Documentation: https://www.w3schools.com/css/css3_multiple_columns.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries