How can I get checkboxes and labels neatly set up?

I'm using WordPress and ProfileBuilder to make checkboxes on my registration site. By custom css I've made checkboxes appear one at each line, with labels next to the checkbox.

.wppb-checkboxes li {
float: left;
display: block;
}
.wppb-checkboxes li:nth-child(1n+1) {
clear: both;
}

Everything looks fine on a computer, but on a mobile device, if the labels are long, the text is moved down below the checkbox. This looks messy, and it's not so clear which checkbox belongs to which label.

See screenshots.

Does anyone have a solution to this? Can I adjust the css code above, add a new one or add a php snippet??

I'm happy for all help