While I understand your read on why the header would go under the panel; the opposite visualisation can follow the same animation "principle" and make the same amount, if not more, visual sense.
Think of an actual accordion being held sideways by someone. The "header at the bottom" logic would have the bottom half of it being pulled down to show the "folded" part; while the "header at the top" logic would be the same accordion being "unclasped", which would make the bottom half just fall down to show the folds (panel). So, from the get-go, I'd argue that the "header at the top" relationship is connected in a more natural and effortless way to its physical world counterpart.
Putting that aside, having the text that titles something at the bottom of that something goes pretty head-on against a left-to-right, top-to-bottom reading and hierarchy pattern. A title, or a "header", goes at the top of a content to give it a name and context (hence the name). In short, having a "head" at the feet is a big no-no in my opinion.
What might be throwing you off is the arrow element being used to expand the panel. Consider other options:
Arrow on the left pointing to the header title
Expands to an arrow pointing down. The selected header gets highlighted and the physical relationship between the header and the panel that shows up "under" it can be reinforced by indentation or a shadow
Another option is using the +/- signs
Regardless of the chosen element to indicate expansion, I'd strongly recommend not putting the header at the bottom. Besides what I just mentioned, if you have a lot of items in your panel, the header might go under the scroll line; so I would be looking at a list of items in a panel without knowing their title (context). You could use an internal scroll on the panel, but scrolling up and down a list that has its title on the bottom still feels very odd.
Well, those are my two cents, hope it helps.
