Responsive Wrapped Text around Image

Having tried this on my Heraldy page with mixed success it is time to work this out.

I am quite happy with how the w3.css library handles the responsive nature of the page and there may well be a solution within the W3 Framework

Performing more research the technique of wrapping text around images is problematic. While is is possible to configure a page to render a page on a fixed screen resolution the responsive behaviour is likely to be compromised.

There are many articles that try to explain how to wrap text around images but these don't work in my opinion. The wrapping of text when the resolution changes often looks messy and it unpredicable when the device that the page is viewed is not known.

I have tried many times to get this to work to me satisfaction but have come to the conclusion that there are better ways of displaying images and text on a page.

geeksforgeeks.org say:

The Geeks for geeks website goes into this in depth. Looking at the exmple code I think that it is a good reason to stay away from this technique.

Geeks for geeks also suggest the use of TABLEs - another technique that I have tried and abandoned.

shape-outside: circle()