yui-pure-css - purecss グリッドの折りたたみ順序を指定する

Question

purecss グリッドが欲しいです。折りたたまれたとき (つまり、小さな画面でのブレークポイント)、右のグリッド アイテムが左のグリッド アイテムの前に表示されるようにすることはできますか? つまり、ある種の崩壊命令ですか？フレックスボックスモデルを使用すると、これらの線に沿った何かが可能になると信じています。しかし、私はこれに精通していないので、ガイダンスをいただければ幸いです。

ありがとう。

Answer 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;
  }
}