Is this responsive layout possible using Flexbox CSS?

Question

Thank you in advance.

I'm struggling with this layout.

<article>
    <section class="content">1</section>
    <aside class="ads">2</aside>
    <section class="comments">3</section>
</article>

At full width i want the comments to sit directly under the main-content and aside to the left. but on a mobile I want the comments to be at the bottom the page, ads in the middle.

Maybe I'm on the wrong track with flexbox? the problem I have using float is that if the aside is longer than the content the comments get pushed far down the page.

Answer 1

Try this example CSS.

Html

<article>
    <section class="content">1</section>
    <aside class="ads">2</aside>
    <section class="comments">3</section>
</article>

css for normal

article{width:870px; margin:0 auto;}
.content{background-color:#0C0; float:left; width:700px; min-height:300px; margin:0 0 10px;}
.ads{background-color:#06F; width:150px; float:right; min-height:450px; margin:0 0 10px;}
.comments{background-color:#F00; float:left; width:700px; min-height:150px;}

css for Responsive

article{width:100%;}
.content{float:none; width:auto; }
.ads{width:150px; float:right; min-height:450px; margin:0 0 10px;}
.comments{float:none; width:auto; }