CODEWITHSUNDEEP
htmlcssflexbox
buzz
buzz

Reputation: 1106

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. [![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 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? [1]: https://i.sstatic.net/8nhZi.png [2]: https://i.sstatic.net/UyeQA.png

Upvotes: 0

Views: 1277

Answers (1)

Johannes
Johannes

Reputation: 67798

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 class="container">
  <div class="A">A</div>
  <div class="B">B</div>
  <div class="C">C</div>
</div>

Upvotes: 1

Related Questions