CSS - Animate list order

Given the following list (different height):

<ul>
    <li>11111111</li>
    <li>2222<br>2222</li>
    <li>33333333</li>
    <li>44444444</li>
    <li>55555555</li>
    <li>66666666</li>
</ul>

is it possible to animate the order of the list (Figure 1), for example moving the element <li>2222<br>2222</li> to the bottom of the list using CSS only?