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.