I use a typical layout element that looks like the left side of this image:


When viewed on a mobile device, the text all naturally shifts beneath the image. This has been "okay" but I'd like to make it look better.

Is there a way to accomplish what I've mocked up on the right side of that image? I'd like the image to become sandwiched between the headline and the paragraph.

Is this possible? Here's a fiddle link with an example of the markup I usually use: https://jsfiddle.net/hf1f7t2m/ (feel free to critique any dumb markup in there).