Foundation-sites: large-pull not working anymore?

[Snorvarg]

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

[codetheorist]

As far as I'm aware, the new XY Grid doesn't utilize the large-pull- classes, but it does use the large-offset- classes so this would be the current, intended functionality.

Please checkout the XY Grid docs for further assistance.

[kball]

@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

[IamManchanda]

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

[Snorvarg]

@IamManchanda, I cannot find "medium-order-" when I search among the css-files.. I use 6.4.0, but downloaded and searched the files for version 6.4.1, nowhere to be found..?

[IamManchanda]

@Snorvarg No its in there

If you are talking about this line
Its in here => https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/css/foundation.css
[ Line 5401 ]

If talking about repo, it's here in sass stuff https://github.com/zurb/foundation-sites/blob/develop/scss/components/_flex.scss#L107-L113

[Snorvarg]

@codetheorist, could I use a negative offset with large-offset- ? Maybe I don't get your point, how would I make the two columns switch place with large-offset ?

[IamManchanda]

@Snorvarg @codetheorist @kball I have used these classes
Offset is not the right classes for this
Source ordering is the right classes for this!

[brettsmason]

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

```html

[IamManchanda]

Yes exactly
@brettsmason Do we need some docs copy here ??

[brettsmason]

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

[IamManchanda]

Ohk let me dig in :smile:

Reopening

[Snorvarg]

@IamManchanda, you are right, it's there! I think I somehow got v6.4.0, and there it is not. I did a file compare, it is added in 4.6.1.
Now it is working.

Thanks for the great work guys, zurb is great to work with! (Fully aware of the tremendous work with keeping the docs up to date)

[IamManchanda]

@IamManchanda, you are right, it's there! I think I somehow got v6.4.0, and there it is not. I did a file compare, it is added in 4.6.1 6.4.1.

Yeah we added in 6.4.1 ... me only did that so i remember... :smile:

The problem was that those were situated in this file https://github.com/zurb/foundation-sites/blob/develop/scss/grid/_flex-grid.scss
which basically was only adding this in legacy flex grid ... :smile:
But now its working ... sigh !

[IamManchanda]

Thanks for the great work guys, zurb is great to work with! (Fully aware of the tremendous work with keeping the docs up to date)

:+1:

[IamManchanda]

Ohk added PR on docs update => #10318