Flexbox change order with column
<p>First images presents grid on PC:
<a href="https://i.stack.imgur.com/4HRvd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4HRvd.png" alt="enter image description here"></a>
Second images present grid on mobile devices:</p>

<p><a href="https://i.stack.imgur.com/URBjb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/URBjb.png" alt="enter image description here"></a></p>

<p>As you can see I need to change order and grid. I try to use flexbox but I need to group B&amp;C on PC, and get A equal height.</p>

<p>Important conditions:</p>

<ul>
<li>On PC A height is equal to sum B and C</li>
<li>On mobile I get order: B, A, C</li>
</ul>

<p>I know that I can use simple duble times B block and use show/hide, but this is not acceptable in my project.</p>