Specify collapse order of purecss grid

Question

I would like to have a purecss grid. When it collapses (i.e. breakpoints on smaller screens) is it possible to make say the right grid item appear before the left grid item? I.e some sort of collapse order? I beleive something along these lines is possible using the flexbox model. But im not a whiz at this, so guidance would be much appreciated.

Thanks.

Answer 1

PureCSS uses flexbox so you can just use the css property 'order'

See an example at 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

Check out the Pure Responsive Grids section here.

Make sure you reference the additional css file shown there.

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

The easiest conceptual example they give looks like this:

Let's look at a responsive grid. Elements within this grid will be width: 100% on small screens, but will shrink to become width: 33.33% on medium-sized screens and above.

<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>