html - CSS:响应式垂直列

Question

我有一个基本的垂直列布局。 See jsbin for example .我现在想让它响应，以便屏幕越小，最左手的列一个一个地脱落(不显示)。唯一的问题是 <article role="main">可能在也可能不在页面上。所以 css 必须适用于下面的所有示例。我感谢所有的想法/建议:)

示例 1:

<nav role="navigation"></nav>
<main role="site">
  <article role="list"></article>
  <article role="list"></article>
  <article role="main"></article>
</main>

示例 2:

<nav role="navigation"></nav>
<main role="site">
  <article role="list"></article>
  <article role="list"></article>
  ...
</main>

示例 3:

<nav role="navigation"></nav>
<main role="site">
  <article role="list"></article>
</main>

==========

更新:

我更新了 jsbin example以便隐藏 overflow-y 并且 <article role="main">有一个最小宽度。

未解决:谁能告诉我如何对列进行排序，以便随着屏幕变小，始终显示最后一列，首先隐藏第一列，然后隐藏第二列，依此类推..？ (如果可能的话，我宁愿不使用媒体查询。)

更新 2:

我将媒体查询添加到 jsbin example现在它正在按照我想要的方式工作。如果您知道如何在没有它们的情况下完成此解决方案，请随时发布答案。谢谢!

Answer 1

我真的希望我可以将它作为评论发布，但是它太长了

不知道它是否有效，无法尝试和测试。所以把它当作一个简单的想法。如果您可以为它们添加类，这可能很容易。1. 增加类导航，增加文章所以，

@media all and (max-width: 360px){
 .navigation{ display: none; }
 .article {display: none;}
 /* and CSS to the MAIN content */ }

@media all and (max-width: 480px){
 .navigation{ display: none; }
 .article:first-child {display: none;}
 /* and CSS to the MAIN content and last child of sub nav */

@media all and (max-width: 780px){
 .navigation{ /* CSs comes here */ }
 .article { /* CSs comes here */ }
 /* and CSS to the MAIN content */ }