DigitalOcean joining forces with CSS-Tricks! Special welcome offer: get $100 of free credit.
The order property is a sub-property of the Flexible Box Layout module.Flex items are displayed in the same order as they appear in the source document by default. The order property can be used to change this ordering.
.elememt {
order: 3;
}Syntax
order: <number>Demo
The following demo shows how the default order (1, 2, 3, 4, 5) has been altered by setting the order property to each item.
Other Resources
- CSS Flexible Box Layout Module Level 1
- MDN documentation
- Advanced cross-browser flexbox
- A guide to Flexbox
- Using Flexbox
- Old Flexbox and new Flexbox
Browser support
| IE | Edge | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| 10 1 11 | 12+ | 20+ | 21-28 2 29+ | 7-8 2 9+ | 12.1+ |
| iOS Safari | Chrome Android | Firefox Android | Android Browser | Opera Mobile |
|---|---|---|---|---|
| 7-8.4 2 9+ | 92+ | 90+ | 92+ | 12.1+ |
- 1 Supported with prefix
-ms- - 1 Supported with prefix
-webkit-
For more informations about how to mix syntaxes in order to get the best browser support, please refer to “Using Flexbox” and this article from DevOpera.
any one have any experience with its effect on SEO ?
It’s important to notice that
orderonly has it’s effect with other ordered items. If any siblings is not ordered, those siblings will be put first in the order they appear in the DOM“order: -1” did it for me (putting on object to the first place).
Ok Imagine If I have col-lg-8 and col-lg-4. Can I initiate order : 1 in col-lg-8 and order: 2 from col-lg-4???
You can use col-lg-pull-* and col-lg-push-* instead