Multiple directions in mermaid flowchart

The code snippet below creates a flowchart with the three boxes Data, Infrastructure & Modeling, ordered from left to right because of this line of mermaid code: flowchart LR. I would like the first two boxes, Data & Infrastructure to behave like that, but the box Modeling should go below Infrastructure. Is it possible in mermaid to allow for multiple directions?

The final flowchart should look roughly like that:

enter image description here

mermaid.initialize({startOnLoad:true});
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>
    mermaid.initialize({ startOnLoad: true });
</script>
<div class="mermaid">
  flowchart LR
  subgraph Data
    direction TB
    da1(Data1) --> api(APis)
    da2(Data2) --> api
    da3(Data3) --> api
  end
  subgraph Infrastructure
    direction TB
    pro(Processing) --> db[(Database)]
    db --> api2(API)
    api2 --> p(Python, R, ...)
    db --> app(Web App)
  end
  subgraph Modeling
    direction TB
    sta(Statistics)
    mal(Machine Learning)
    mem(Mechanistic Models)
  end
  api --> pro
  p --> Modeling
</div>