I have multiple columns within a row, with text in each, and a link button at the bottom of each. As I move the page size slider inward, the text re-aligns as it should, but the buttons do not stay in alignment across the bottom of the columns. They fluctuate up and down a bit as the text shifts.

In an older post I saw a suggestion to place a subgrid in each column, and put the buttons in the bottom row of the subgrid. This works perfectly, and the buttons stay in alignment, with one exception. As the screen size diminishes it becomes necessary to break the initial row of columns to maintain a normal looking page. So, I add a breakpoint, and change the spans for the columns. The text is fine, but since the buttons are at the bottom of each column, they shift all the way to the bottom and are no longer below the text that they coincide with. I am sure I am not the first to have this problem, but can find nothing in the forums that address it.

Hi Phil,
Can you share your fb file so we can look at your issue first hand?

Hey Phil,

For this, I would recommend placing the paragraphs in a container, and keep the buttons outside (below) the container. Then set a min-height for the container itself so that the buttons stay evenly spaced at all screen sizes.

You will have to play around with the min-height of the containers, but it should not take much.

Eric, the site is live at StarkeCommunityChurch.com. The index (home) page is where the issue is. I have worked around it by making the columns wider than I wanted so that they did not shrink too much as the page narrowed.

I am trying to make "Our Ministries" "Our Vision" "Our Mission" be on the same row. As the page drops below a breakpoint, change the span on the first 2 columns to 6 each, forcing the third one down. Near the bottom of the page, there are 4 items I was trying to get into the same row, with the same effect.

My whole issue is trying to keep the buttons horizontally even as the text morphs. They fluctuate as the text morphs. By using a subgrid within each column, the buttons stay aligned. But then when the page size narrows, and it becomes necessary to enlarge the first 2 columns, the row with the buttons drops to the very bottom and is no longer associated with the associated text.

I'll need the rsd file to give the best instructions.

I think this is a job for Flex Man!

Have you played around with Flex Box yet. Go to the Theme Chooser and under tutorials you will find a flexbox one.

This is the file you requested.

there are some tutorials in the RSD 1.5 for Flexbox, and other respources on the net like "flexboxfroggy"
In your row, give each column a Display of Flex. Then in the menu that appears, give it a direction of column, and for Justify, give it Space Between. In the column, insert a container. Inside that container place your icon, and paragraph. In the column, but underneath the container, insert the Read More button. The icon and paragraph will be at the top, and the button will be at the bottom. You will need to give the column a minimum height. I did something like this in a file I created using your graphics before you posted your file, the forums break on me when I post a file, so its in a dropbox;
https://www.dropbox.com/s/y8n0b93fi83q0em/ch.rsd?dl=0

Then at breakpoints, you'll have to readjust the column heights, until its just not feasible anymore, then I gave each column a span of 12 so they stack. Use the above technique for the 4 clickables above the footer. The graphic with the 2 people might be easier to deal with if it has its own row. For the flexbox - get rid of all the subgrids. Just make 4 columns across and do the above, then resize when necessary and respan them when they need to stack.

I wrote space-around, I meant SPACE-BETWEEN

This is what I did for for the group of 4 buttons. At some point the columns go awry, so you need to add extra breakpoints, or change how the columns float. Or just overall increase the size of the columns. One column is shorter than the others and as all the other columns extend that one will float left. Some of the buttons - ar at least one of them had a 25 padding at one of the breakpoints, so it might have thrown things off. This is using the flexbox model. When the columns go screwy in my file, increase the first one's min-height to 239 - all the columns in that row are the same class. Then, the buttons will look far apart from close to the break point, so maybe add another breakpoint and pad the buttons up. As along as all the columns are a the same min-height and that min-height covers all the contents - they will all be the same size and buttons will be on same horizontal plane. I reclassed the buttons because it might mess up that class elsewhere, and the rows were separated.

https://www.dropbox.com/s/msagdbdzxcwjaql/SCC.rsd?dl=0