As a temp solution I applied some JS but ideally I would do this with an overwrite of a file, so:

I'm still open for the suggestion which file to edit/override so I can get the prefered order without relying on JS.

/* temp solution to reorder towards: header - subforums list - topics */
document.addEventListener('DOMContentLoaded', function() {
    // select the parent container
    var contentDiv = document.querySelector('.wpforo-content');
    // select the elements to be rearranged
    var forumsDiv = document.querySelector('.wpf-subforums');
    var subforumSepDiv = document.querySelector('.wpf-subforum-sep');
    var headBarDiv = document.querySelector('.wpf-head-bar');

    // check if all elements exist
    if (contentDiv && headBarDiv && forumsDiv) {
        // move `wpf-head-bar` to the top
        contentDiv.insertBefore(headBarDiv, contentDiv.firstChild);
        // move `wpf-subforums` below `wpf-head-bar`, only if `headBarDiv.nextSibling` exists; otherwise, it appends at the end
        if (headBarDiv.nextSibling) {
            contentDiv.insertBefore(forumsDiv, headBarDiv.nextSibling);
        } else {
            contentDiv.appendChild(forumsDiv);
        }
    } else {
        // uncomment the line below in case you want to troubleshoot
        // console.log("One or more elements were not found.");
    }
});