Align buttons under text

I have a three column layout, with each column having a title, image, body copy and button.

I used a full width spacer to ensure my buttons are all vertically aligned and it looks as intended (on desktop).

On mobile though the buttons aren't associated with the relevant image and text (since the spacer is breaking the column layout).

If I remove the spacer the buttons are now associated correctly on the mobile view, but on desktop aren't vertically aligned.

I've tried searching for a solution to this, but haven't found anything that works.

Is this possible, or do I have to look at some custom CSS?

Thanks in advance for any help you can give.

Can you share link to page in your question?

It's not live yet, but this is the current layout (works on mobile).

If I add a full width spacer, the buttons are always aligned on desktop, but on mobile they appear after all the image and text content.

You can setup password & share url

parrotfish-hypersphere-ftkc.squarespace.com

password is 'edenbridge'

If you want to move the first button down to align with the second one, remove the spacer, which I think you already have done,  them add a paragraph (line feed) to the text block above it. Just hit enter until the block gets larger and pushes down the button.  

If I do that it will look fine at some break points, but not at others (depending on how the text wraps).

Hi. It seems you solved?

Hi there, I'm having a similar issue where on mobile display, the buttons don't line up under their related text but instead sit grouped all together at the bottom of the block. Here's a link to the web address (https://www.next25.org.au/leadership/#courses). Can anyone suggest a way that I can set this page up so that on mobile, these blocks appear under the relevant text? (see screenshot). Thank you!