SPPB 5: How to build a row with 4 colums that first splits into 2 + 2, then 1 as screen gets narrower

I'm building a page in SPPB 5.5.1 which has a row with 4 columns. As the screen size gets narrower the colums are eventually show one below the other.

I'd like to show the colums side by side, then as the screen gets narrower, first two and two, and finally only one column. How can I achieve this?

Example
Wide screen:

column-1 column-2 column-3 column-4

Smaller screen

column-1 column-2
column-3 column-4

Even smaller screen

column-1
column-2
column-3
column-4

Regards
Peter