Transcript

00:09 so in this video we're going to be
00:11 looking at column ordering um and
00:13 essentially what that does is this is a
00:15 very common layout that we want a lot of
00:17 times we'll have text an image on the
00:19 right and a lot of times what we want is
00:22 on mobile we want that image to go to
00:24 the top well that's kind of tricky to do
00:27 actually it seems simple but it's kind
00:28 of tricky to do by default um I'm pretty
00:32 especially in previous versions of
00:34 Foundation and that is so simple to do
00:37 now inside foundation six so I should
00:41 start by saying this exact example that
00:43 I'm showing you is actually shipped a
00:45 part of the foundation six templates and
00:47 it's called column swap
00:49 okay so if you go to the foundation six
00:51 templates layout section there is a
00:54 template here called column swap and
00:57 that's exactly what we're going to be
00:58 reviewing today
01:01 so all this power is done because of the
01:03 new ordering option inside columns Pro
01:06 so you have a columns Pro layout I have
01:09 my column 1 and column 2 I'm set to be
01:12 small 12 and then medium is Auto okay so
01:17 it'll go to columns on medium and then
01:19 on small devices it'll go 100% width
01:22 it'll fill the width
01:25 and what we'll notice um is inside
01:27 column one um I have purse first you
01:31 always want to start with your layout on
01:34 mobile okay so you want the order of
01:37 your columns to be what you want it to
01:39 be on mobile okay that is very important
01:42 it's not the layout that you want on
01:44 desktop it's what you want it to be on
01:46 mobile so we start on mobile we want to
01:49 have our image on top and then below
01:52 that we want to have our text okay um so
01:56 on column let's look at our sizing we
01:58 have it on 12 on small and if we look at
02:01 our ordering here um we haven't set to
02:04 small as default and then medium is
02:06 gonna be one we're setting it to be one
02:09 think of ordering similar to Z indexes
02:12 if you're thinking about that right this
02:14 these are just simply numbers so the
02:16 higher the number the further down the
02:19 column order it's going to be okay so on
02:23 small we want everything to remain the
02:25 same as it is so we'll set that to be
02:27 default and then on medium we we want
02:31 this to increment to be one now let's
02:34 look at column two on column two we're
02:37 simply in setting everything to be
02:38 default so essentially think of default
02:41 as being zero okay now because column
02:43 one has higher than zero um an order of
02:49 one it's going to remain um after column
02:54 two okay so let's preview that again so
02:59 here on mobile we have column one and
03:03 column two are said to be full with the
03:05 orders are set to be default which is
03:07 essentially zero okay um so they're
03:11 going to remain in the same layout
03:14 now as I make this bigger column two
03:18 goes first because it has a least left
03:21 that as the default which is zero but
03:25 then column one had it an order of one
03:28 which is higher so and say we'll go
03:31 after
03:34 hopefully that makes sense um it's
03:36 pretty simple if you wanted to change it
03:38 even on large you then you maybe even
03:41 swap it back if you wanted right by
03:43 changing the orders again just to show
03:46 you an example of how we can do that
03:48 let's say on column to enlarge I want to
03:52 give this an order of two
03:56 now let's say we wanted to kind of take
03:59 this a little step further on let's say
04:01 go to column two and if we set large to
04:04 have an order of two okay um what that
04:07 means is on large column one is set to
04:11 have an order of one and column two is
04:15 set to have an order of two so
04:17 essentially what I expect on large
04:19 device is is that column the image will
04:22 be in column one and the text will be in
04:24 column two so let's start from let's
04:27 start from mobile and if we look here we
04:29 have our mobile layout and if we go to
04:33 medium we have what we had because
04:34 column one is set to have an order of 1
04:38 and column 2 is said to have an order of
04:40 zero so um that's why this comes after
04:44 now if we keep going to large what we'll
04:48 notice is it swaps again and the reason
04:50 is because I've made column to unlock a
04:52 van order of two which is larger than
04:56 one so it will go after hopefully I
04:59 didn't completely confuse you here um
05:01 it's a pretty simple concept it's just
05:03 the bigger number wins
05:05 um and the more you play with this the
05:08 more you'll kind of understand it but
05:09 it's definitely something you can play
05:11 with and um it's pretty simple concept
05:13 to grasp um talking it out loud
05:16 sometimes I think it might sound
05:18 confusing but hopefully we cleared it up
05:20 for you today
05:30 you"}]