Question

我想要一个purecss网格。当它崩溃时（即较小屏幕上的断点）是否可以说右网格项出现在左网格项之前？那某种崩溃顺序？我可以使用flexbox模型相信这些内容。但我不是一个高手，所以指导会非常感激。

感谢。

Answer 1

PureCSS使用flexbox，因此您只需使用css属性＆＃39; order＆＃39;

请参阅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;
  }
}

Answer 2

查看 Pure Responsive Grids 部分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>

指定purecss网格

2 个答案: