HTML5 Semantic Elements Nesting with Boostrap

Question

I have an article template in which I want the title to run the full width of the page (12 cols), and then the text itself to fall in below with an adjacent sidebar (8 and 4 cols respectively). The problem is that I can't get the sidebar to nest alongside the article body without placing it within the article section.

My question is: is it bad practice to move the sidebar element up so it falls within the article section, and thus sits nicely on the right next to the main content, but below the title?

The markup would look something like this:

<article>
  <header>
  PAGE/POST TITLE
  </header>
  PAGE/POST CONTENT
  <div class="sidebar">
  SIDEBAR CONTENT
  </div>
</article>

Answer 1

The article element, just like any other HTML element, should only contain content that conforms to the element’s definition.

Including navigation doesn’t seem to be appropriate, unless it’s the navigation for the article itself (like a table of contents or similar), in which case you should use the nav element.

While there is the aside element, which would allow to markup separate content inside of article, this content still has to be

[…] tangentially related to the content around the aside element