text and photo aligned at the top, text first

Hi Laura,

To have a better understanding of the inquiry, may we ask for a mockup image or a site with a similar layout as your description?

Hope to hear from you soon! Thank you! :)

Hi, Fernando - I've made a screenshot, but I'm clumsy about giving it a URL to send you, attaching it to a blog page to get it and not being able to delete it until you don't need to access it anymore. Is there a way to do it simply that I've somehow managed to miss on the forums?

To share screenshots, you may try using Cloudapp(share.getcloudapp.com) or our suggested way: https://docs.generatepress.com/article/using-the-premium-support-forum/#uploading-screenshots

Hope this helps! :)

https://imgur.com/a/IHD1JtO

- In the first cluster, I was able to align the heading (... under his wagon,) with the first photo only if I put the photo before the heading that announces the photo. A small screen will show the photo and heading in backwards order.

- In the second cluster, I was able to show the photo and heading (... in his big shed,) in the proper order, on the small screen, only if I sacrificed having them inline. I have not found away to get a line of text inline with the top of a photo, only the bottom. Too much space is sacrificed.

I have not found a block which serves this purpose without interfering with the margins and visually breaking a paragraph up, or forcing a division of spaces that doesn't fit. Not of these limitations come up in a cluster of text and media if the text follows the photo, only when it leads.

I realize this is a Gutenberg issue, and I've been trying to ask the Wordpress forums, but I can't seem to get the "ask a question" or "start topic" button to appear where the articles say it should appear. Sorry about that.

Yes, this is indeed a Gutenberg layouting dilemma.

If you want to place the heading (…under his wagon) on top of the said image on smaller screens, the easiest route I could suggest is having two instances of this heading, and then displaying only one of them depending if the screen is large or small.

See this for reference: https://share.getcloudapp.com/wbuYvQGL

To hide/show certain contents depending on devices, you can use the three handy built-in classes below:
hide-on-mobile
hide-on-tablet
hide-on-desktop

You can add these classes on the Advanced settings of the Paragraph block.

See: https://share.getcloudapp.com/eDuln7Go

Also see: https://share.getcloudapp.com/GGuEJzDQ

Here is what it looks like implemented: https://share.getcloudapp.com/eDuln7qo

Hope this helps! :)