Responsive Column Reordering

[00:00:00]
>> Jen Kramer: So now what we need to do is we need to pull out column three. And we're gonna move it down underneath. Let's do this in two parts. Part one is let's pull out column three. [LAUGH] Okay? Let's pull out column three. And just make it appear at the bottom.

[00:00:13]
So let's think this through, okay? So right now, we're working in 16 columns here, yeah, okay, and this was the arrangement. We're trying to pull out the third column. So effectively how wide does the third column become?
>> Speaker 2: 16.
>> Jen Kramer: It could potentially become 16. Here's the next thing I want you to break in your head.

[00:00:38]
Okay, when you work in boot strap or any of those other response design frameworks you have 12 columns right and it's 12 columns no matter what you do. Guess what we have in this arrangement. We can change how many columns we have like that can't we? So, we can just change the number of columns we have and move our column down, how cool would that be?

[00:01:06]
Okay. So, the devs column right now is two columns wide. What if here, at our next media query, what we do is the following. Let's go ahead and re-declare our main. [SOUND] And let's say instead, we'll make the columns 14, right? 16 minus two is 14, so I'm gonna make these 14 wide, alright?

[00:01:34]
And then my devs will wind up doing what?
>> Jen Kramer: My devs will have a width.
>> Jen Kramer: Of 14 correct? Does that make sense?
>> Jen Kramer: Okay, now technically speaking in order to make this work with the cascading media queries here because we've got these series of minimum widths, right?

[00:02:05]
So when I'm actually down here at 1200 pixels, I'm actually getting these styles feed into this. Let's say if I was at 1300 pixels, I am definitely over 950 pixels and I am over 1200 pixels so both of these things are true, right? So we need to rearrange these properties a little bit now to make this code work, okay?

[00:02:26]
So that's the next thing I wanna do. So down here, even though we had it declared at the top, let's re-declare main again, now to be columns of 16, right? Okay? And then first, main and those can go up here, right, because those are saying the same and resources are staying the same as well.

[00:02:58]
So, does that kind of make sense why I did that?
>> Jen Kramer: So first is gonna be five columns wide whether we're at 950 or 1200 pixels.
>> Jen Kramer: Same with main, it's gonna be six columns wide at either dimension, devs changes, so we have 14 down to two, resources gonna be the same at both.

[00:03:22]
And the number of columns changes. All make sense? Okay? So let's save that. And now let's go ahead and refresh our page. All right, so here we are at fat dimensions looks good. Let's go ahead and go down. Oops, looks like we still have a couple of other things to do?

[00:03:41]
Developers dropped down exactly as we wanted it to. And so did Design Resources, why is that? Can anyone explain why that happened?
>> Speaker 3: Because the devs section ended up just taking the entirety of a new row, or not row but [INAUDIBLE].
>> Jen Kramer: It kind of does. It did exactly what you told it to do, didn't it?

[00:04:10]
That's so annoying when that happens. Okay, so we had these. This is now 11 columns wide right? We have five over here on the left. We have six over here on the right. So we have three empty columns we said justify a space between and so there they are in the middle.

[00:04:26]
Then we have our developers, they are taking up the full 14 columns. And then underneath is our design resources they got pushed down. Row wrap it did exactly what we told it to do. So how do we fix this problem?
>> Speaker 2: Order?
>> Jen Kramer: The order property, right? All we have to do is simply reorder with Flexbox.

[00:04:45]
We're just reordering the order of these boxes. So let's go on ahead and say first we'll have an order of one. Main will have an order of two. Devs will have an order of of four, correct? And resources has an order of three.
>> Jen Kramer: So now that devs is going to be the last column, correct?

[00:05:15]
It's the one that winds up while wrapping under. Devs is just going to be in line with the other columns. Makes sense? Okay, save that.
>> Jen Kramer: Let's go on ahead, and refresh the page, and see if that worked. Hey, look at that.
>> Jen Kramer: There we go, we grabbed the third column.

[00:05:37]
>> Jen Kramer: How amazing is that? How often do you see that done? That would actually be pretty hard to do with Bootstrap, wouldn't it? Potentially. Okay? So, there it is. Yeah, it's not formatted right yet, we're getting there. Okay? All right, how are you doing? Are you happy people, so far?

[00:06:00]
Okay, so now, if I go back and pull this back out again. Oops! What do we need to do now to fix this problem?
>> Speaker 3: The order again.
>> Jen Kramer: Change the ordering again! Correct in the 1200 pixel media queries. So here we need to say that devs is now an order, whoops, order of three.

[00:06:24]
Yeah? And resources becomes our order of four. Okay. So now there we go, there they are in the right order now, yeah?
>> Jen Kramer: Okay, devs goes down to the bottom, they're stacked on top of each other because that's exactly what we told it to do, and you know what?

[00:06:49]
I'm going to leave it like this for the moment. Okay, let's just keep on going down and get everything in the right order, and then we'll go back and clean it all up, okay? Alright, so, my next question to you now that you have seen how this process works, okay, so we went from 16 columns to 14.

[00:07:08]
What I would like for you to do is I would like for you to try the next media query. The next media query is 740 pixels. Okay? I want you to think about what needs to happen. This is the final dash MD down there in your files. This is the way it's supposed to look.

[00:07:28]
Don't worry about the devs yet. The devs are gonna be stacked on top of each other. But what I'd like for you to do is to get to the first and the second columns next to each other just like that and then have your devs and your design underneath.