George Katsanos George Katsanos - 15 days ago 6
CSS Question

Flex direction column but two of the children next to each other with different order for desktop

This is part of a responsive design in which the layout is

flex-direction: row
for desktop and it has to be
flex-direction: column
for mobile. BUT, the two elements
one
and
three
have to be next to each other instead of on top of each other. (you can't put them in a container separately as that will break the desktop layout).

Is there any way to achieve this with Flexbox?



.flex-container-desktop {
display: flex;
flex-direction: row;
}

.flex-container {
display: flex;
flex-direction: column;
}

.child {
border: 1px solid red;
margin-right: 10px;
padding: 5px;
}

.two {
order: 1;
}

.three {
order: 2;
}

.one {
order: 3;
}

<b>Desktop</b>
<div class="flex-container-desktop">
<div class="child one-desktop">
Child 1
</div>
<div class="child two-desktop">
Child 2
</div>
<div class="child three-desktop">
Child 3
</div>
</div>
<hr>
<b>Mobile</b>
<div class="flex-container">
<div class="child one">
Child 1
</div>
<div class="child two">
Child 2
</div>
<div class="child three">
Child 3
</div>
</div>

<br>
Child 3 and 1 should be next to each other only on mobile.




Answer

You can do this with flex-direction: row and media queries. So when its mobile view you change order and make first element take full width with flex: 0 0 100% and two other elements 50%. Also its important to set flex-wrap: wrap so two other elements go to next row.

* {
  box-sizing: border-box;
}
.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.child {
  border: 1px solid;
  flex: 1;
  padding: 5px;
}
@media(max-width: 768px) {
  .two {
    order: 1;
    flex: 0 0 100%;
  }
  .three {
    order: 2;
    flex: 0 0 50%;
  }
  .one {
    order: 3;
    flex: 0 0 50%;
  }
}
<div class="flex-container">
  <div class="child one">
    Child 1
  </div>
  <div class="child two">
    Child 2
  </div>
  <div class="child three">
    Child 3
  </div>
</div>