Hello everyone and welcome back to our bootstrap course.
In this lecture we're gonna be making a response of columns.
So right now we have these pages set up and in mobile mode we can see that we have an icon up top and
then text and then we have text again and an icon.
And that's happening because we made this design which is typical on a Web page where you have the icon
on the left and then on the right you would have the next icon and then you have the icon on the left
again.
So this exact format but because we're designing mobile first we are going to change up our code so
that instead of displaying on the bottom here we're going to move this icon to display on the top on
mobile but still keep the zigzag on Web.
So how are we going to do this.
Well mobile first means that your code is optimized for mobile.
So everything in your code initially will be what the mobile is going to look like.
And then you would add media queries for other screen sizes that are larger.
So that means we're gonna have to change this up in order to make it mobile first going to actually
to change our code and then add media queries for the Web site.
So how are we going to change as well.
We're going to take this column that we have and we're going to move it above the text and instantly
the icon will be at the top for mobile.
And as soon as Jay has been catches up with the code it will show that.
However on the full screen what page the icon will now be aligned to the left of the screen.
So in order to align it to the right of the screen what we're going to do is add media queries in CFS
so you can use media queries in CFS to change how the web page looks on a larger screen.
So first we're going to set up a media query to set up a media query.
You call the at or Ampersand symbol and you type media then you can specify the minimum width that will
contain all the code containing the CFS that should be applied based on a minimum with.
So we're going to set men with 2 700 pixels.
So that means whenever a screen is 700 pixels or larger then we're going to apply the specified code
inside to it.
And this will override any default code that was there before the men with seven pixels.
So what we're going to do is we're going to take our entire block which is Block 2 and we're going to
change its styling.
So in order to change the styling of an element inside of a media query you call it just like you would
outside of the media query but you put it inside.
So any styling in here will not be applied to block 2 until the screen size is seven hundred pixels.
So I'm going to set the display to flex in block 2.
Now this means that block 2 will now be flex flex is known as a flex box.
And this will help you create rows on your screen.
So every time you make an element like block 2 to be display flex it means that the element is now a
row.
And why are we using display flex because flex is similar to bootstrap in that it applies automatic
styling.
So it makes a role for us.
Now we're going to change the Flex direction to be a role.
We're going to specify that OUTFRONT upfront.
That way we can see immediately and make sure that it's a row because the other option is to make it
a column.
But if we had a column then every item in the block would be stacked on top of each other because every
item in a flex row is considered to be one item in the row.
So one column if it is a row and if it's a column direction then that means that every item is treated
as a row.
So now we have flex direction row.
Next we're going to do is we're going to assign the order of each element to be changed.
If the width is a larger screen size so we're going to have responsive order.
And this means that the order will be changed and this order is going to be one and then the other order.
So we can actually change it to first order.
The second order
responsive.
This order will be too.
So that means that whenever the screen size is large so greater than seven hundred or equal to seven
hundred then we are going to have the order of this element B one in the order of this almond to be
two.
And we're going to assign this to be our icon and this to be our text.
And this way it will flip the current order.
So let's copy first order responsive and come over here to our text where we have our second feature
right down here and let's apply first order responsive as the class of our text down here in this column
we're going to add first order responsive and in the icon we're gonna add.
Second order responsive.
Now by default you will not see any changes because you must add one more thing to the CFS here and
that is screen only.
And now this will help your media query to check for the screen only.
And then you specify the width of the screen.
Now if you go to the output and you toggle the CFS then you scroll down you'll see the order of the
icons has flipped.
If you open up the ECMO tab again then you'll see that this is the default code where the order is one
for each icon by default because we placed the code for the icon above the code for the text.
And then when you toggle the EU out to see the full screen version on a website on a much larger screen
size.
Now you can see the order has reversed all thanks to these media query that we made up here.
Just as one only made one so far.
We can make more media queries for different screen sizes you would just have to add another block just
like this with the different men with men with means that the minimum with must be seven hundred for
this code to apply for the CSF styling change to this and this will override the default styling.
Okay.
Thank you for watching everyone.
You just learned how to make your columns responsive using media queries which will change the order
of elements.
You also briefly learned about flex box which is an extremely useful styling tool similar to bootstrap.
However it's not a library that you have to import.
Similar to flex box.
I also encourage you to look into grid if you haven't already.
But that is extra credit because we are not covering flex or grid in this course.
They are more styling tools that will help you style such as we have seen so far.
You can use flex to change the direction of elements in a column and rope and because you're working
with columns and rows for this specific section of the page flex box came in handy to help with the
responsiblity.
Thank you everyone for watching and we will see you in the next lecture.
Where we're going to be continuing adding more pages to this project.
See you there.