I'd like for the four columns I have on krislyle.com/contact/ to stack differently when responding to mobile device.

Here's a key for the below diagrams: A (Talk), B (Text), C (Email), D (Answer)

On desktop it is essentially (which is fine):

A | B

C | D

Upon rearranging / stacking it goes:

A

B

C

D

I would prefer it to stack like the following instead (so that the background images keep their alternating pattern of dark/light/dark/light instead of dark/light/light/dark):

A

B

D

C

How can this be achieved?

Thanks Tahir. I actually came across that before I posted but at the time was convinced by a friend that uses Salient on a daily basis that were was another means that did not require CSS; but I was mistaken. Thank you for your time and help.

Best