If I have three elements flaoted to right, why order is following (see jsfiddle) element 1 is first element on right side, when element 3 is actually last element.
Order is now
  
  
That 'inverted order' is the intended result.
You can dig around in the CSS Specification if you'd like, but your example renders as it ought to.
If you'd like them to display in the same order as the markup, float the .container right, its children left.