Change flex-direction for mobile layout-CodePudding

I have 3 divs (A, B, C) where A is positioned at left and BC are positioned at right. [![pic 1][1]][1] 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 [![pic 2][2]][2]

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 >
  <div >A</div>
 <div >
    <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? [1]: https://i.stack.imgur.com/8nhZi.png [2]: https://i.stack.imgur.com/UyeQA.png

CodePudding user response：

It won't be possible with the extra container for B and C which you have in there, but if you put all three elements on the same level, you can use the order parameter to determine the order of the flex items and margin-right: auto; to do the left/right alignment, and all this differently in the media query as shown below.

.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.A {
  margin-right: auto;
}

@media screen and (max-width: 600px) {
  .A {
    order: 2;
    margin-right: 0;
  }
  .B {
    order: 3;
  }
  .C {
    order: 1;
    margin-right: auto;
  }
}

<div >
  <div >A</div>
  <div >B</div>
  <div >C</div>
</div>