The reason is because CSS is Cascading, so rules are applied according to how far down the file they are. If you switched .orange to the bottom, you would have both <div>s with orange text, and therefore with the class taking priority being orange.
solved Which class will be applied to div and why? [duplicate]