html - Having trouble getting a new layout to work as desired in Bootstrap 4

Question

I have a hyperlink in the figure caption on my project and the link only appears to work when in mobile view / or small screen where the columns collapse. For some reason, this issue isn't replicated on JFiddle but it is when I test on a variety of browsers and devices.

I discovered that with my old code, the paragraph's area was overlapping the hyperlink's hoverable clicking space, and making it impossible to click until the image would stack above on smaller screen/mobile in the old code.

**Old HTML** JFiddle: https://jsfiddle.net/LybeppL3/7/

**So I tired a workaround**: see Current Code:           https://jsfiddle.net/5c2sm9s1/1/ 

OR @ PreemPrice.com

Specifically, I am trying now to break up a column for the picture on the right, the paragraphs of text to it's left, and when on mobile, that the picture stacks above the paragraphs of text and is centered.

However, my workaround does not look as nice/ not as responsive on mobile as my old code.

Specifically, I miss how in the "old" code, see JFiddle, it is really responsive in that the image keeps the same size, and once it's too big, it collapses over the text. In my current work-around, the photo shrinks uglily, and then stacks below instead of above the paragraphs.

Also, I miss how the image is fully centered at the top in mobile device in the old code.

I would appreciate help in getting this to work properly! Thanks!

Answer 1

Waitting for answers