How would I use a media query to change the number of columns a block spans at a smaller screen size?

[61885]

Site URL: https://www.jeremyleegibbs.com/

When I inspect my homepage it appears to be set up with 12 columns. 

[2 column Spacer] [4 column image block] [4 column text block] [2 column spacer]

This is great for larger screen sizes but on a tablet it makes the text awkward and hard to read.

If I use "@media screen and (min-width:640px)" and "@media screen and (max-width:1024px) " is there a way to have the Spacers then span 0 columns and both the Image and Text blocks span 6?

I have tried hiding the spacers with:

@media only screen and (max-width:1024px) {
.sqs-block.spacer-block { 
   display:none !important; }}

but unfortunately this only removes them from display and does not change the layout because of the 12 columns the number spanned by the image and text is not effected.

Any ideas would be greatly appreciated! 

Thank you for your time!

[rwp]

@61885 I added some code to your other post. Should get you going on the right track.