​x
 
1
<!DOCTYPE html>
2
<title>Example</title>
3
<style>
4
.outer-container {
5
  height: 200px;
6
  font: 100 24px/200px sans-serif;
7
  text-align: center;
8
  color: white;
9
  display: flex;
10
}
11
​
12
.outer-container div {
13
  width: 33%;
14
  flex: 1;
15
}
16
​
17
.red {
18
  background: orangered;
19
  order: 1;
20
}
21
​
22
.green {
23
  background: yellowgreen;
24
  order: 2;
25
}
26
​
27
.blue {
28
  background: steelblue;
29
  order: 3;
30
}
31
​
32
.animated {
33
  animation: myAnimation 1s ease 1s 1 forwards;
34
}
35
​
36
@keyframes myAnimation {
37
  100% {
38
    order: 4;
39
  }
40
}
41
</style>
42
​
43
<div class="outer-container">
44
  <div class="red animated">Red</div>
45
  <div class="green">Green</div>
46
  <div class="blue">Blue</div>
47
</div>
48
​
49
<p><strong>Note</strong>: Browser support for the <code>order</code> property, and animations on this property was limited at the time of writing. If you can't see the proper effect, try using Firefox.</p>