Last Updated
Learn Development at Frontend Masters
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.
Syntax
order: <number>
.flex-item {
order: 2;
}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.
Related Properties
Other Resources
- order in the spec
- order at MDN
- Advanced cross-browser flexbox
- A guide to Flexbox
- Using Flexbox
- Old Flexbox and new Flexbox
Browser Support
- (modern) means the recent syntax from the specification (e.g.
display: flex;) - (hybrid) means an odd unofficial syntax from 2011 (e.g.
display: flexbox;) - (old) means the old syntax from 2009 (e.g.
display: box;)
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 21+ (modern) 20- (old) |
3.1+ (old) | 2-21 (old) 22+ (new) |
12.1+ (modern) | 10+ (hybrid) | 2.1+ (old) | 3.2+ (old) |
Blackberry browser 10+ supports the new syntax.
For more informations about how to mix syntaxes in order to get the best browser support, please refer to this article (CSS-Tricks) or this article (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