order

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.

Check out this Pen!

Related Properties

Other Resources

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).

Comments

Mostafa

# April 10, 2016

any one have any experience with its effect on SEO ?

Reply ↓

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```

Copy and paste this code: micuno *

Notify me of new posts by email.