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: https://wordpress.stackexchange.com/a/50602/66195 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.

Solutions Collecting From Web of "How to change the order of the comment_form fields with css?"

You could use flexbox instead of table if wanting to do this with css. Flexbox lets you order elements easily:

#commentform {
    display: flex;
    flex-flow: column;
}
.comment-form-comment {
    order: 1;
}
.comment-form-url {
    order: 2;
}
.comment-form-email{
    order: 3;
}
.comment-form-author{
    order: 4;
}
.form-submit{
    order: 5;
}

Here’s an example:
http://codepen.io/candid/pen/NxKJyW/