Change flex-direction for mobile layout

I have 3 divs (A, B, C) where A is positioned at left and BC are positioned at right.But for mobile layout I want to have them positioned like the image below...where C is positioned at left and AB are at right

for the first pic I had this code implemented

.container { display: flex; align-items: center; justify-content: space-between;}@media screen and (max-width: 600px){    .container {      flex-direction: row-reverse;    }}

<div class="container"><div class="A">A</div><div class="container"><div>B</div><div>C</div></div></div>

But for mobile devices I tried using flex-direction but it isn't giving me the expected output. any suggestions?