Alignment and block order issues on mobile

Site URL: https://www.treetopmarketing.ca/portfolio-services-1

Hey Everyone!

I am fairly new to web design etc and have been working on a couple sites for my employer. I have run into issues with alignment of blocks on certain pages and therefore issues with the layout order on mobile.

I have type blocks under images and because the paragraph lengths are different, the buttons under those are not lining up horizontally when stacked directly under the image. So I figured out that if you put a spacer that goes across the whole page you can force things to line up nicely, then delete the spacer. This however causes the order in mobile to mess up, since it acts like a new set of columns. 

It should be image text button, image text button etc. but when forced to line up nicely the mobile looks like image image image, text text text, button button button

It seems either I can have things aligned, but out of order on mobile, or the other way around. 

I am hoping there is some sort of solution where we can have both the alignment and order correct. Maybe css that reorders the blocks when in mobile? Or maybe I am just missing a trick in laying this out so Squarespace cooperates.

I have tried a couple things but it seems that the code is beyond me. Any help would be greatly appreciated! I have another site we are building as a sub site of this main one that is facing the same issue.

Thanks!

You can recreate the layout the way you did the first time. Then we can use CSS to evenly align the button.

Thus, on mobile, it will have a correct order.
With the current layout, you need to use a lot of JavaScript to handle the problem.