This course has been updated! We now recommend you take the CSS Grid & Flexbox for Responsive Layouts, v2 course.
Transcript from the "Re-ordering Content and Layout" Lesson
[00:00:00]
>> Jen Kramer: One last thing that I'd like to add to this. I'd like to add the ability to reorder a row. So what if I wanted to take this, let's say this first row here, which is currently Boston cream pie, coconut cream pie and key lime pie, pumpkin pie, basically alphabetical order.
[00:00:18] What if I wanted to reverse the order of those, and have pumpkin pie first, and Boston cream pie last? Is there a way I can do that? There's actually two approaches you could use. Does anybody have any suggestions?
>> off screen: Row reverse
>> Jen Kramer: So row reverse would be one possible solution.
[00:00:39] And what would be the other possible solution?
>> off screen: Order.
>> Jen Kramer: Order on each individual cell. Which is better?
>> off screen: Row reverse.
>> Jen Kramer: It depends. [LAUGH] It depends, your $1000, zillion dollar consulting phrase. So if we really, truly do wanna just reverse it from the current order to the reverse order, we can do it pretty simply with a single class just using row reverse, right?
[00:01:08] Or, we could use four different classes to reorder it, right? So it just sort of depends on what you're doing with your code and ultimately the layout that you're gonna have at various break points as to which will be the better way to go. So, since we've done stuff with order, let's try to write a class then that will go ahead and reverse that row.
[00:01:30] So let's go on head and do that. Let's make this class just for desktop only. So what might I call this particular class?
>> off screen: Reverse.
>> Jen Kramer: Call the class reverse, because that's what it does. Great idea. And then what would be the property value pair that I would put in here for reverse?
[00:01:53] Anyone have any suggestions? Look at your cheat sheets.
>> Jen Kramer: Look at that cheat sheet, what would I put in? Anybody, but Peter.
>> off screen: Flex-direction?
>> Jen Kramer: Flex-direction, flex hyphen direction, and this time we're going to say what? Row reverse
>> Jen Kramer: Okay, and then where would I apply this particular class in my HTML?
[00:02:28]
>> Jen Kramer: Where would I apply the reverse class in my HTML?
>> off screen: Be on the row.
>> Jen Kramer: It would be on the row, correct, right. Because it's a parent, as you see here on your cheat sheet, it is a parent property not a child property, so it will go on the parent here.
[00:02:43] So reverse, and if we did that, and we refresh our page, hopefully we would see the reverse. Did it worked, did I save everything?
>> Jen Kramer: Too small for me to see.
>> Jen Kramer: It helps if you put it on the correct row, sorry. Row 1, reverse. I put it on row five and expected row one to change, shockingly, that did not work.
[00:03:14] Okay, so let's refresh. There we go. We have an interesting problem going on here. Does anyone see the problem?
>> off screen: Shifted. Alignment.
>> Jen Kramer: Yeah, look at this. Are you designers happy? No? What could we do to fix this? What should we do to fix this problem?
>> off screen: Justify content?
[00:03:42]
>> Jen Kramer: We could justify the content, but what is causing this problem? What causes this problem up here?
>> off screen: A margin being overridden.
>> Jen Kramer: Yeah, so we put the margin on the left, correct? So the margin's on the left.
>> Jen Kramer: Twice. Okay so what we can do here then is in our CSS we can say this, margin, hyphen left is zero, margin-right is 4%
[00:04:29]
>> Jen Kramer: Now when we refresh it's still not working. [COUGH] Let's see what did I do? I did this.
>> Jen Kramer: [class*= 'col-1'].
>> Jen Kramer: There we go. Okay, so remember that the margin's actually on the item, right? That's what's going on here. So if you go up here at the top, the row is what we have to reorder, right?
[00:05:09] But the margin is actually associated with the individual item. So what we've done here then is, and actually, we should probably break that into two classes shouldn't we? Which should have a reverse class, which is that cuz that's the parent. And then we should say reverse this thing.
[00:05:40]
>> Jen Kramer: Makes sense? So there's the parent, we reverse the parent, and then we are gonna change around the margin on the two children to make that work, right? So if you save that and then refresh the back, now it's gonna work. There we go.