Confusion about HTML5 section, article and aside element compared to div element

Question

Let's say I want to create a simple responsive one page homepage. I find several alternatives to do this, but what is the best option? I have read several articles on the net including the ones fron W3C, but I don't get a clear answer!

I'm going to have two column layout with text to the left and an image to the right. On a desktop computer they will be besides each other, styled left and right. But in smaller devices like a mobile, the right column will be changed to left and be placed below the text column.

Is alternative 1 bad in a HTML5 point of view? My thought was to devide the page with several parts of alternative 1 or 2. There is also a third alternative(I guess there almost endless with other options aswell) to use two article elements inside the section element and use a article element for the image instead of the aside element.

I guess some of you might also suggest me to use article element instead of section elements and use nested article. It's confusing with all this options!

Should I also use article and header element in alternative 1?

Preciate some feedback and guidelines! Sorry for all my questions, I just want to improve my coding skills!

Alternative 1:

<div id="intro">
<div class="content-left">
<h2>Headline</h2>
<p>Text</p>
</div><!-- end class content-left -->
<div class="content-right">
<img src="...."/>
</div><!-- end class content-right -->
</div><!-- end id intro -->

Alternative 2 with HTML5 elements:

<section id="intro">
<article>
<header>
<h1>Headline</h1>
</header>
<p>Text</p>
</article>
<aside>
<img src="...."/>
</aside>
</section>

Answer 1

The answer is: it doesn't really matter much, apart from code readability. Please see Why use HTML5 tags? for more on that.

You could have a <section class="articles"> that contains all <article> elements. You could have a <div class="articles"> that contains all <div class="article"> elements. I think it's safe to say there's no doubt the first one is easier to read for developers. Your pick.

There is, however, one issue: you self-close <img> -- no need for that in html5 anymore. See Are (non-void) self-closing tags valid in HTML5?.

In HTML 5, <foo /> means <foo>, the start tag. It is not a "self-closing tag". Instead, certain elements are designated as having no end tag, for example <br>. These are collectively called void elements. The slash is just syntactic sugar for people who are addicted to XML. Using the slash in a non-void element tag is invalid, but browsers parse it as the start tag anyway, leading to a mismatch in end tags.