CODEWITHSUNDEEP
yui-pure-css
user2237076
user2237076

Reputation: 331

Specify collapse order of purecss grid

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.

Upvotes: 3

Views: 950

Answers (2)

stickyuser
stickyuser

Reputation: 2890

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

Upvotes: 6

Zachary Dow
Zachary Dow

Reputation: 1947

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>

Upvotes: -1

Related Questions