更新

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，以便隐藏溢出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 */ }

CSS：响应式垂直列

更新

更新2：

1 个答案: