Good Afternoon (AEST),
A tad stuck,

I have a column with 3 containers. In each container, I have a Header 1 | Paragraph | text link | photo.

When I am on the smallest break-point(s) it works wonder. Header 1 on top and then down to photo on the bottom. When I reach the desktop though, I am wanting Header 1 | Paragraph | Text Link to appear on top of each other, but the Photo to appear to the right of it all. But I cannot get it to work.

All elements are set to BLOCK, Column and Containers are set to Flex.

Pictures attached showing what it is now (with everything in-line) and settings.

Any suggestions?

Hi T-X
Saw your question and wonder if this is what you are wanting?
If it is, I'll explain in the next post exactly what I did to get it.
Cheers,
John

Here's how I got there. I'm sure others might have a different or better way

I first started with the Row, then divided the column into 2 columns.

I set both columns to 12 spans.

Then I inserted the Header, paragraph and finally the text link into the left column.

I put the photo placeholder in the right column.

I set the first column to the following:
Display: Flex
Direction: Column
Wrap: No Wrap
Justify: Flex Start
Items: Flex Start
Content: Flex Start

I set the second column to Flex with the following settings:
Display: Flex
Direction: Column
Wrap: No Wrap
Justify:Center
Items: Center
Content: Flex Start

This works fine for phone and tablet breakpoints.

For the desktop I set both columns to 6 spans so they would be on the same row.

I set the photo size to 500 wide just so I would have a better dimension and then I measured the height of it and set the left column to a minimum height of that same dimension. That way I can center the content to the center of the photo. Not sure if you need to do that or not, just my way of keeping things neat.

I must be more bored than I thought....

Cheers,
John

Thank you John,
Solved my problem.