How do I visually display things differently than they are declared as in HTML?

Question

Say I have this structure:

<div class="container">
    <div class="image">
        <img src="image.jpg" alt="">
    </div>
    <h1 class="title">Hey, tis a title!</h1>
</div>

This will generate a layout precisely like this:

image
title

My goal is to, even if the code stays the same, display the content as:

title
image

How can I achieve this?

Answer 1

You can put the title in position relative and a margin top on image to avoid overlap.