How to change the order of the comment_form fields with css?

I would like to have the comment form display, from top to bottom: 1- the comment-form-comment; 2 - the comment-form-url; 3 - the comment-form-email; 4 - the comment-form-author; 5 - the submit button; 6 - the subscription check-box from a plugin;

According to the 4th reply found in this question: http://ift.tt/18DTXtJ I was able to experiment with these CSS rules:

#commentform {
    display:table;
    width:100%;   
}
.comment-form-comment {
    display: table-header-group; 
}
.comment-form-author {
    display: table-footer-group;
}

but the .comment-form-author ends up below the submit button and the subscription check-box, which is not only not what I need, I also realize I have no clue on how to reorder the middle elements - that would be displaying as table-row-group. Can anyone guide me on how to customize the order of the elements in the comments form?

PS - In case more context can help you guiding me to a different approach: I'm looking to adapt and use the comments form as a form for users to submit content, which I would replace in the posts content with the help of a shortcode plugin. The free versions of the form-building plugins that I found have different limitations and I think the Wordpress comments form might keep more possibilities open, especially when combining it with other plugins.