指定 purecss 网格的折叠顺序答案

【问题标题】：Specify collapse order of purecss grid指定 purecss 网格的折叠顺序
【发布时间】：2015-08-27 11:18:00
【问题描述】：

我想要一个 purecss 网格。当它折叠时（即小屏幕上的断点）是否可以说右侧网格项出现在左侧网格项之前？即某种崩溃顺序？我相信使用 flexbox 模型是可能的。但我不是这方面的专家，因此非常感谢您的指导。

谢谢。

【问题讨论】：

标签： yui-pure-css

【解决方案1】：

PureCSS 使用 flexbox，因此您可以只使用 css 属性 'order'

查看http://jsbin.com/kobaqojo/1/edit?html,css,output的示例

html

  <div class="pure-g">
    <div id="red" class="pure-u-1 pure-u-md-1-3"> Red </div>
    <div id="green" class="pure-u-1 pure-u-md-1-3"> Green </div>
    <div id="blue" class="pure-u-1 pure-u-md-1-3"> Blue </div>
  </div>

css

.pure-u-1 {
  color: white;
}
#red {
  background: red;
}

#green {
  background: green;
}

#blue { 
  background: blue;
}

@media screen and (min-width: 767px) {
  #blue {
    order: 1;
  }

  #red {
    order: 2;
  }

  #green {
    order: 3;
  }
}

【讨论】：

【解决方案2】：

查看纯响应式网格部分here。

确保您引用了此处显示的其他 css 文件。

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">

他们给出的最简单的概念示例如下所示：

让我们看一下响应式网格。此网格中的元素将是宽度：在小屏幕上为 100%，但会缩小为宽度：33.33% 在中型及以上屏幕上。

<div class="pure-g">
    <div class="pure-u-1 pure-u-md-1-3"> ... </div>
    <div class="pure-u-1 pure-u-md-1-3"> ... </div>
    <div class="pure-u-1 pure-u-md-1-3"> ... </div>
</div>

【讨论】：

OP 询问的是元素顺序，而不是响应式网格
@Jishaxe 你是完全正确的。不敢相信我忽略了这一点。