Ordering Columns

4 minutes
Share the link to this page
You need to have access to the item to view this lesson.
One-time Fee
List Price:  $139.99
You save:  $40
List Price:  €131.19
You save:  €37.48
List Price:  £112.24
You save:  £32.07
List Price:  CA$192.60
You save:  CA$55.03
List Price:  A$217.25
You save:  A$62.07
List Price:  S$190.37
You save:  S$54.39
List Price:  HK$1,096.25
You save:  HK$313.23
CHF 90.89
List Price:  CHF 127.26
You save:  CHF 36.36
NOK kr1,101.16
List Price:  NOK kr1,541.68
You save:  NOK kr440.51
DKK kr699.21
List Price:  DKK kr978.92
You save:  DKK kr279.71
List Price:  NZ$236.19
You save:  NZ$67.48
List Price:  د.إ514.11
You save:  د.إ146.90
List Price:  ৳15,319.96
You save:  ৳4,377.44
List Price:  ₹11,694.97
You save:  ₹3,341.66
List Price:  RM669.64
You save:  RM191.34
List Price:  ₦181,567.03
You save:  ₦51,880
List Price:  ₨38,857.05
You save:  ₨11,102.81
List Price:  ฿5,147.32
You save:  ฿1,470.77
List Price:  ₺4,550.80
You save:  ₺1,300.32
List Price:  B$732.62
You save:  B$209.33
List Price:  R2,665.20
You save:  R761.54
List Price:  Лв256.41
You save:  Лв73.26
List Price:  ₩192,455.38
You save:  ₩54,991.18
List Price:  ₪530.55
You save:  ₪151.59
List Price:  ₱8,009.48
You save:  ₱2,288.58
List Price:  ¥21,617.62
You save:  ¥6,176.90
List Price:  MX$2,374.63
You save:  MX$678.51
List Price:  QR509.31
You save:  QR145.52
List Price:  P1,929.29
You save:  P551.26
List Price:  KSh18,618.67
You save:  KSh5,320
List Price:  E£6,790.31
You save:  E£1,940.22
List Price:  ብር7,942.45
You save:  ብር2,269.43
List Price:  Kz117,241.62
You save:  Kz33,500
List Price:  CLP$137,040.41
You save:  CLP$39,157.20
List Price:  CN¥1,013.40
You save:  CN¥289.56
List Price:  RD$8,251.22
You save:  RD$2,357.66
List Price:  DA18,826.63
You save:  DA5,379.42
List Price:  FJ$317.87
You save:  FJ$90.82
List Price:  Q1,085.64
You save:  Q310.20
List Price:  GY$29,225.48
You save:  GY$8,350.73
ISK kr14,084.59
List Price:  ISK kr19,718.99
You save:  ISK kr5,634.40
List Price:  DH1,416.82
You save:  DH404.83
List Price:  L2,505.87
You save:  L716.01
List Price:  ден8,074.51
You save:  ден2,307.16
List Price:  MOP$1,125.87
You save:  MOP$321.70
List Price:  N$2,657.05
You save:  N$759.21
List Price:  C$5,137.77
You save:  C$1,468.04
List Price:  रु18,685.75
You save:  रु5,339.16
List Price:  S/525.19
You save:  S/150.06
List Price:  K530.57
You save:  K151.60
List Price:  SAR525.14
You save:  SAR150.05
List Price:  ZK3,528.03
You save:  ZK1,008.08
List Price:  L652.66
You save:  L186.48
List Price:  Kč3,316.71
You save:  Kč947.70
List Price:  Ft51,682.51
You save:  Ft14,767.48
SEK kr1,089.22
List Price:  SEK kr1,524.96
You save:  SEK kr435.73
List Price:  ARS$121,682.87
You save:  ARS$34,769.02
List Price:  Bs966.66
You save:  Bs276.20
List Price:  COP$547,598.77
You save:  COP$156,467.96
List Price:  ₡69,943.14
You save:  ₡19,985.18
List Price:  L3,446.12
You save:  L984.67
List Price:  ₲1,033,044.43
You save:  ₲295,176.63
List Price:  $U5,445.86
You save:  $U1,556.07
List Price:  zł568.23
You save:  zł162.36
Already have an account? Log In


Hello, in this bootstrap four video, we are going to look at column ordering. Column ordering allows you to move your column X amount and column spaces I mean your element x amount of columns basis to the left or to the right motherfucking. What's the difference between column ordering what we're going to talk about today, and I'll set in a column for starters offsetting a column, you can't move it to the left, you can only move it to the right, we ignoring that if you were to offset a column by or an element or say sorry, an element, if you were to offset an element by two column space is those two columns spaces, they're basically you can essentially think of them as used or no longer usable anymore, because also any other elements to the right of that element that you've moved. They also moved whereas column ordering if I were to move an element to the right, it will just overlap it or go on to the future.

Depending on the vet index apply to each of the elements. But he won't actually affect the other elements first, great. So we're going to just show you how to do that. I've looked up the web browser, I've got this little website, and at the moment, I've got it on the small screen size. So what I'm going to do is do co dash now you put the screen size that you want to affect with the ordering for FM. So for small for us, dash, push, and again, push will move to the right, pull will move it to the left, I'm going to push it six columns to the right, save this now, go back to the web browser and refresh my thing is disappeared.

It's not disappeared, it's just underneath the green element. And because this was added afterwards, it has a higher priority in terms of Zed index, but I'm also going to do cold dash FM dash po done Six. So this is gonna pull it six columns to the left, save that before refreshing. And like I said before, it doesn't affect the other element. So even though the read element will push to the right, the green element was not moved. So if I refresh, they've essentially swapped where you don't need to do because at the moment, we've done the push in the port, the same as the sois.

But you could pull it by only Lessing for refresh and there you go. The red one was pushed six to the right. But the green one was only pulled four to the left. And by doing that, it's still overlapping some of the red element. Now I want to show you what happened before we saw before resize down the column. Audran doesn't take effect and like anything in bootstrap, it bubbles up Not done.

So if I were to resize to small screen size, medium, large and extra large, it's still affecting it simply because we have as a small push and a small pool therefore it can apply to medium, large and extra large screens. So to get around that, you just need to do call dash MD dash push dash zero for this is essentially going to eliminate the push this we're going to call dash MD dash co dash zero so this will eliminate the poll and like I said, it will bubble up to the large and extra large so we only need to do it for medium. We go back refresh as you can see on the larger screen so it still looks great. Then on the small screen size, it's got the column ordering that we applied to it. And on the smallest screen size extra small. It doesn't have anything regarding eight Column Width of 1212 and 12.

So that's it for column ordering within bootstrap. If you have any questions, anything whatsoever, feel free to post them on our education platform. So non learning Dakota UK for slash question dot php, there'll be a link in the description to that. Plus, there'll be another link in the description to the source code from this video. So check that out as well. Please rate, comment and subscribe as it does really help keep the content free.

Plus, it helps us provide more content to you on a regular basis, which I think we all want. And as usual, thanks for watching, and I hope you have a great day.

Sign Up


Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.