Join Jen Kramer for an in-depth discussion in this video Source ordering, part of Learning Foundation 4.
I am continuing to work here on the document that we started in the last video about nested grids. I've renamed that document to sort ordering. If you're following along, you can find that file in the exercise files folder or just keep on working with the document you've already been working on. The next problem that I want to address is this page looks great the way it is, except for this column over here on the left. As we make the page smaller, that column on the left looks really ridiculous. And, in fact, our images look kind of small also.
One possible solution to this is, instead of using the small grid where we have these things next to each other. Maybe as the page gets smaller they should stack. So, that's a relatively easy change to make, and we've seen that before. So here, in our row, what we want to do is change our small 3 to, say a large 3. And down here, on line 27, in our small 9, we're going to change that to a large 9. Now, I am going to maintain my small fours down here underneath.
That way, my images are going to continue to be stacked three across, next to each other. Remember, that's a nested grid, so that's going to be treated a little bit differently. But what should happen is, as this page gets smaller now, the text should show up on the top and the grid of three images should show up underneath. If we save this page and we take a look at inside of our web browser we should see that behavior exactly. So, as I make the page smaller, we hit that 768 break point and now we have text on the top and we have our images underneath.
And thats great. What if though, I wanted to have my images on top and my text underneath. But I still wanted to have my text on the left when the page was big. Well, it seems easy enough, I could just switch the text and the images. I could take just a side chunk of text here and I'm going to cut that, Ctrl or Cmd x, and I'm going to put it after this row. So, if I save this and put that in my web browser, then my images show up on top here in the large format the text shows up underneath.
But as I make the page bigger now, I have the text on the right side of the page and I really want it on the left side of the page. This seems like a problem that might not have a solution. But fortunately, Foundation offers a way that way you can change your source order depending on the size of the screen. Foundation has some additional classes that are called push and pull. Push and pull basically do exactly that as the screen gets smaller. They push or pull content around on the page to make the source order go in the correct order. If I take a look at my source code here, again back up where it says large nine columns.
What I really want these large nine columns to do, when the screen is big, is I want them to push over to the right. I'm going to add here a push three, push-3. And down here at the bottom where I have my large three columns, what I really want these columns to do is pull all the way over to the left. And I have to go over nine spaces to get to that left column. So, I'm going to add a pull-9 here to this part of the row.
Now when I save this page and I put this in my web browser at the small screen resolution, I still have my images on the top like this with the text underneath. But the large screen resolutions my text is indeed showing up on the left side of the page, with the images over here on the right side of the page. This is a very powerful feature of the Foundation grid system. The ability to reorder your source depending on how big the screen is. So, you can control what pieces of information will show up where in the grid system as your screen is changing dimensions.
- What is Foundation?
- Exploring the grid system
- Working with lists
- Styling buttons, thumbnail images, and more
- Including flexible video
- Adding breadcrumbs to the navigation
- Working with Clearing, the responsive lightbox
- Creating accordion panels and tabs for in-page navigation