Reducing amount of columns depending on screensize.

Currently I am building a website, this website has a services row made out of 4 colums.
Each column has its own builder again to make it into 2 rows
top row = builder
bottom row= button (this is done so the button is connected to outer border, but the text (top row) has padding)

TOP ROW consist of
image &
editor

The system works great for screens that fit all 4 columns, however once it reaches mobile resize spacing (750px atm) it will change to a 1 column system to account for smaller screens, however at 750px that is not required yet.

It would be nice if it would go to 2 columns instead and when it reaches even smaller (450px in width) it goes to one column

TLDR:
Current situation:
Desktop (large)(>750px)
4 columns
Reducing size (750px)
4 columns
reducing size (tablet size) (>450px, <750px)
2 columns
reducing size (cellphone) (<450px)
1 column