foundation-sites: large-pull not working anymore?

Hi! I am not an expert at zurb foundation, so please bear with me.

I was using Zurb foundation 6.3.1 but has updated to 6.4.0.

Successfully converted from “row” to “grid-container”. But I cannot seem to find where large-pull and push went?

Old html looks like this:

<div class="row">
  <article class="large-3 medium-12 columns large-push-9 side">
     <!---content sidebar-->
  </article>
  <article class="large-9 medium-12 large-pull-3 columns">
     <!---maincontent-->
  </article>
</div>

On large the sidebar comes on the right side and the maincontent on the left. On medium the sidebar take upp full width, and comes first, maincontent below. It is more or less a copy-paste from the zurb example pages.

My question is: How do I acheive this with the new grid-container ?

I posted my question here as well: (Feel free to give the answer at stackoverflow as well) https://stackoverflow.com/questions/44846865/zurb-6-4-0-where-did-the-large-pull-3-go

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 15 (12 by maintainers)

Most upvoted comments

@IamManchanda Maybe we need a small section with a demo then point to the flexbox utilities listing for it for more details. Something along the lines of you need to include the flexbox utilities in order to do this etc etc.

brettsmason on Jul 3, 2017

@Snorvarg Just to confirm, the correct markup based on your example would be:

<div class="grid-container">
  <div class="grid-x grid-padding-x">
      <article class="large-3 medium-12 cell large-order-2">
         <!---content sidebar-->
      </article>
      <article class="large-9 medium-12 cell large-order-1">
         <!---maincontent-->
      </article>
  </div>
</div>

brettsmason on Jul 3, 2017

@Snorvarg Seems like what you are looking for sits right here http://foundation.zurb.com/sites/docs/flexbox-utilities.html#source-ordering

IamManchanda on Jul 3, 2017

@codetheorist is exactly correct. Push and pull are a bit of a hack solution necessary for Float based grids, but the XY grid is a flexbox based grid which allows you to explicitly order things by breakpoint. Check out the offset classes here: http://foundation.zurb.com/sites/docs/xy-grid.html#offsets

kball on Jul 3, 2017