Flexbox rearrange vertically and horizontally

Question

and flexbox gurus,

I'm becoming desperate finding an elegant solution (= without having to add additional container- / wrapper elements) for the following problem:

The (simplified) HTML looks like:

<div class="card">
  <div class="card__header">
    <span>(( Title ))</span>
  </div>
  <div class="card__visual">
    (( image ))
  </div>
  <div class="card__body">
    <p>(( some text ))</p>
  </div>
</div>

and respective SCSS:

.card {
  display: flex;
  flex-direction: column;
  border: 1px solid black;
  &__header {
    background: yellow;
    border: 1px solid black;
  }
  &__visual {
    background: deepskyblue;
    border: 1px solid black;
    ...
  }
  &__body {
    background: red;
    border: 1px solid black;
  }
}

This results - as expected - as follows:

So far so good, this is what it should look on mobiles.
The problem & question is, how the same HTML structure could be styled to get the following output:

Is there even a way to achieve this? The most close I could come so far is:

.card {
  display: flex;
  flex-direction: column;
  &__header {
    align-self: flex-end;
    width: 50%;
    ...
  }
  &__visual {
    align-self: flex-start;
    width: 49%;
    ...
  }
  &__body {
    align-self: flex-end;
    width: 50%;
    ...
  }
}

But I cannot find a way to eliminate the "gap" between the header and body:

So anyone out here with a smart approach :) ? Inputs warmly appreciated.