35. Changing the visual order with flexbox - Responsive CSS Tutorial

is what we currently have and so this image on the left is what we currently have and we're aiming something that looks a little bit more like than s and you can see there's a pretty big difference between the two of them right now with the order of everything and I said there's a good reason for that so in this one we're just gonna fix the order of it then we're gonna worry about positioning things a little bit within that space if we come down and we take a look let's go back to our mark up here and come down to our recent articles so we've done is created our article recent inside of our article recent we have the main and we have this recent secondary now this is gonna be really useful make it to the big screen sizes because we want two columns that's the main reason I created these two separate dibs is so at large screens we can have the two columns right now though we only have one column because we're on small screens but we need to rearrange the order of everything so what I want to do is I want to give let's come up so we'll come over here to our styles and we can do our article recent with display flex we can change the order but first when I do display flex it has created two columns so I want you to go ahead now and change that back so it wouldn't be two columns I want them to stack one on top of each other direction and switch that over to a column and now we have it back they pretty much exactly how we had it before but now we can play around with ordering and this is pretty cool so what I'm going to do is to change the order of something we go and we do it on the child itself so we have our article recent main and we had the article recent secondary and on different things within a flex you can literally apply and order to them so if I said order 2 and I can come on this and say order 1 it's going to switch the order of them you might have even noticed that the order of it like sort of jumped around so if we go and take a look really quick look you can see that it actually has changed our images on top and everything else is on the bottom and that's awesome that's super cool right so why would we do this again it's to be focused on keeping the mark up making more sense and the logical order here as if if there was no CSS that loaded in so somebody could still read it in a way that makes sense as if there's no CSS and if we want to make visual changes we can if we want to make visual reordering we can because we have a hierarchy that we were following that still is drawing the eye to the right place if the CSS were to fail it would make a lot more sense the order that we see it in here now closer to when you are the first that's gonna come you're literally saying this should be first this should be second this should be third just for fun if you wanted to you could try doing what would happen if I gave it 0 well guess what it means it's smaller than 1 so it's it's going first or then what happens if I give this a negative 1 well that's smaller now so it goes first so it's the smaller your number the earlier it is and you can have a hundred items and you could give them all in order and that would be a nightmare to control and to set up but if that's what floats your boat go for it but I'm gonna stick with my Q and a 1 if you have two things that have equal order they're gonna go in the order they were originally in the markup so they're gonna follow whatever they had here because they have the same value so if you don't apply anything now we'll switch this one back to it too it might even be worth putting a comment in your code just to explain why you're bothering to do this if you think it's not clear enough or if you'd be coming back later and maybe think you might be confused by something like that this lesson is focused really on order but I do want to just finish up a little bit on here so the other thing I wanna do is on my article recent just add a little bit of margin-bottom to them of say to em to create that space here just so it's not sticking to the image of the next one that we have in there cuz if not it doesn't look very nice so just adding in that empty space is a good thing and again go with a bigger margin than you might expect we do have a layout to be basing things on if you're looking back at your layout as well the last thing while we're here though is you might be going what you know we just added some space here but the last thing we might you might be wondering about is this gigantic space that we're getting here part of it is we have our h2 here that has a margin top and we have this which we added a big margin bottom on and that's causing some problems any maybe go and we'll shoot those margins be collapsing and normally they would be collapsing but there's something weird with flexbox and collapsing margins they don't collapse anymore that's only for the direct children so I'm not gonna get too much into that we're definitely gonna run it into more situations with it but we need the fix for this for the for this little time frame anyway is the fix which we need to do on our site at large anyway so I'm just gonna scroll all the way up to my h1 h2 h3 here and say that it should have a margin top of 0 because we're gonna run into other issues with that if not anyway so if we go and take a look that just sort of sucks everything up a little bit closer and looks a little bit nicer I'm going to explore how you could potentially get that to be even closer when we look at the media query in the next one where we're gonna pull this over to the right side and suck that up even more that's an exploration video more than the best practice video but we'll see that