Flexbox Change Order With Column

First images presents grid on PC: Second images present grid on mobile devices: As you can see I need to change order and grid. I try to use flexbox but I need to group B&C o

Solution 1:

If I understand your requirements correctly, this would be the answer.

To make it easier to see, I have done the change with a hover state instead of a media query.

The trick is to take A out of flex layout in the PC version

.container {
  border: solid 1px black;
  margin: 10px;
  display: flex;
  flex-direction: column;
  position: relative;
  width: 400px;
}

.container > div {
  width: 200px;
  font-size: 50px;
}

.a {
  background-color: tomato;
  eight: 100%;
  osition: absolute;
}

.b {
  background-color: lightgreen;
  height: 140px;
}

.c {
  background-color: lightblue;
  height: 200px;
  order: 3;
}

.containerdiv {
  width: 50%;
}

.container.a {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 50%;
  height: 100%;
}

.containerdiv {
  align-self: flex-end;
}


.container:hover.a {
  position: static;
  height: 130px;
  order: 2;
}

.container:hoverdiv {
  width: 100%;
}

<divclass="container"><divclass="a">A</div><divclass="b">B</div><divclass="c">C</div></div>

Solution 2:

Here is a demo if you know what the height of the outer wrapperis- for illustration it is the viewport height in the below example:

body {
  margin: 0;
}
* {
  box-sizing: border-box;
}
.wrapper {
  display: flex;
  flex-wrap: wrap;
  height: 100vh;
}
.wrapper > div {
  border: 1px solid;
  width: 50%;
  height: 50%;
}
.wrapper > div:first-child {
  height: 100%;
}
.wrapper > div:last-child {
  margin-left: auto;
  position: relative;
  top: -50%;
}
@mediaonly screen and (max-width: 650px) {
  .wrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: initial;
  }
  .wrapper > div {
    width: 100%;
  }
  .wrapper > div:first-child {
    order: 2;
  }
  .wrapper > div:last-child {
    order: 3;
    top: 0;
  }
}

<divclass="wrapper"><div>A</div><div>B</div><div>C</div></div>

Here is a demo when you wrap B and C into a container. Note that it is not possible to get B-A-C in mobile view here- only A-B-C is possible. See snippet below:

body {
  margin: 0;
}
* {
  box-sizing: border-box;
}
.wrapper {
  display: flex;
}
.wrapper > div:first-child {
  width: 50%;
  border: 1px solid;
}
.wrapper > .inner-wrap {
  display: flex;
  flex-direction: column;
  width: 50%;
}
.wrapper > .inner-wrap > div {
  width: 100%;
  border: 1px solid;
}
@mediaonly screen and (max-width: 650px) {
  .wrapper {
    display: flex;
    flex-direction: column;
  }
  .wrapper > div:first-child {
    width: 100%;
  }
  .wrapper > .inner-wrap {
    width: 100%;
  }
}

<divclass="wrapper"><divclass="content"><p>A</p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
    sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
  </div><divclass="inner-wrap"><divclass="content"><p>B</p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
      sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
    </div><divclass="content"><p>C</p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
      sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
    </div></div></div>

Conclusion:

I guess if you don't know the exact height of the flexbox, you won't be able to achieve the order in mobile view along with the layout in PC.

---

2019 Update

With CSS grids, you can have a perfect solution here - a 2-column layout to arrange the grid items and you can switch the order by explicitly placing the item(s) using grid-row (or grid-column) definitions - see demo below:

body {
  margin: 0;
}
.wrapper {
  display: grid; /* grid container */grid-template-columns: 1fr 1fr; /* 2 column layout */grid-template-rows: auto 1fr; /* 2 rows */height: 100vh;
}
.wrapper > div {
  border: 1px solid;
  /* flexbox for centering */display: flex;
  justify-content: center;
  align-items: center;
}
.wrapper > div:first-child {
  grid-row: span 2; /* span two rows */
}

@mediaonly screen and (max-width: 800px) {
  .wrapper {
    grid-template-columns: 1fr; /* one column */grid-template-rows: auto; /* reset row definiton */
  }
  .wrapper > div:first-child {
    grid-row: 2; /* place in second row */
  }
}

/* presentation styles below */.wrapperdiv:first-child {
  background: #67c36e;
  font-size: 5em;
}

.wrapperdiv:nth-child(2) {
  background: #ec897c;
  font-size: 2em;
}

.wrapperdiv:last-child {
  background: #7cd0ec;
  font-size: 5em;
}

<divclass="wrapper"><div>A</div><div>B</div><div>C</div></div>