Mermaid flowchart layout

Question

I have the following Mermaid code that renders the following diagram:

flowchart LR;
    classDef socket fill:#f9f,stroke:#333,stroke-width:4px;
    subgraph host1[Client Host]
        subgraph "Client Process (Browser)"
            app1[Browser Code] <--> socket1[Socket<br/>TCP/64206]:::socket
        end
        subgraph os1[OS]
            socket1 <--> tcp1[Transport Layer] <--> ip1[Internet Layer] <--> link1[Link Layer]
        end
    end
    subgraph host2[Server Host]
        subgraph os2[OS]
            link2[Link Layer] <--> ip2[Internet Layer] <--> tcp2[Transport Layer]
        end
        subgraph "Server Process (Web Server)"
            tcp2 <--> socket2[Socket<br/>TCP/80]:::socket <--> app2[Server Code]
        end
    end
    link1 <--> link2
    ip1 <-.-> ip2
    tcp1 <-.-> tcp2
    socket1 <-.-> socket2

I would like to change the layout of the blocks so that the host1 subgraph is laid out top-down and host2 is laid out bottom-up. That is, the two Link Layer blocks should be rendered at the bottom, directly above them the Internet Layers, then the Transport Layers, then the Sockets and finally the Code blocks at the top. Is there a way to do it in Mermaid? Alternatively, is there a convenient way to edit the SVG to obtain the desired layout?