使用Flexbox CSS可以实现这种响应式布局吗？

Question

提前谢谢。

我正在努力解决这个问题。

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

在全宽度时，我希望评论直接位于主要内容之下，并且位于左侧。 但在手机上我希望评论位于页面底部，广告位于中间位置。

也许我在使用flexbox时走错了路？我使用float的问题是，如果旁边的内容比内容长，则注释会被推到页面的下方。

Answer 1

试试这个例子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; }