The solution can be catered in a slightly different way to solve such issues.
A simple layout like this would solve quite some issues. Mobile designs require careful usage of space. Illustrative approach for such can help simplify and beautify app designs.
Description about the layout:
The social login buttons can be arranged horizontally instead of vertically with icons illustrating what social networking site to login with. This will resolve the scrolling issues to quite a good extent. Proper dimensions might help remove scrolls completely.
Now the next question:
What order can it be in?
Before answering this question it is important to know whether or not social login will really be important for the application. If it is preferred that social login is required, then may be having it before the login fields can be a good option.
Looking at it from another perspective:
Handling mobile form filling actions can sometimes be too much work for the user. Keeping this in mind may be the user would prefer easier login/registration functionalities instead of filling all details exclusively.
The final solution could be considering all the sides of the workflow and then choosing where it can possibly fit in.
I would suggest that keeping the social media icons on the top could be a good option since it will be visible to the user as soon as the screen appears and easier to work with the login screen ( for a user ).
Proper designs can help users navigate through the application easily and will also avoid issues which would appear otherwise.
Hope if not the solution I was able to give a perspective on it :)