Re-arranging flexbox layout for mobile view

Question

I have 4 divs that I am using flexbox to align. At desktop size, there are 3 equal width columns with the first and last divs taking up the entire height of the container. The second and third divs stack vertically in the middle with each taking up 50% of the height. That's working fine.

At mobile size, I want the last div to be on top and to stretch the entire width of the container. Then I want the first div to align left underneath the top div and take up 50% of the width and the remaining height of the container.

The problem I'm having is I want the second and third div to align right under the top div and take up the remaining 50% of the width but to stack vertically so each takes up 50% of the remaining height.

I've tried changing the flex-direction in the media query and everything else I can think of but it's not working.

* {
  margin: 0;
  padding: 0;
}

.box-wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 70vh;
  align-items
}

.boxa {
  background: red;
  flex: 0 0 100%;
  width: 33%;
}

.boxb {
  background: orange;
}

.boxc {
  background: lightgreen;
}

.boxb,
.boxc {
  flex: 0 0 50%;
  width: 33%;
}

.boxd {
  background: grey;
  flex: 0 0 100%;
  width: 33%;
}

@media (max-width: 700px) {
  .boxa {
    order: 2;
    width: 50%;
    flex: 0 0 75%;
  }
  .boxb {
    order: 3;
    width: 50%;
    flex: 0 0 37.5%;
  }
  .boxc {
    order: 4;
    width: 50%;
    flex: 0 0 37.5%;
  }
  .boxd {
    order: 1;
    flex: 0 0 25%;
    width: 100%;
  }
}

<div class="box-wrapper">
  <div class="boxa"></div>
  <div class="boxb"></div>
  <div class="boxc"></div>
  <div class="boxd"></div>
</div>

score 0 · Accepted Answer · answered Feb 07 '19 at 22:38

The layout you want is difficult to achieve with flexbox because flexbox is not well-suited for 2-dimensional grids. It excels at 1-dimensional grids (placing flex items in rows or columns), but has limited capacity in 2-dimensional grids (placing flex items in rows and columns).

Being that your desired layout involves items having to cross row and column lines, flex is not your best option. With CSS Grid, your layout is simple and easy.

jsFiddle demo

.box-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;  /* 3 equal width columns */
  grid-template-rows: 1fr 1fr;         /* 2 equal height rows */
  height: 70vh;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  padding: 5px;
  grid-template-areas: " first second last " 
                       " first  third last ";
}

.boxa { grid-area: first; background: red; }
.boxb { grid-area: second; background: orange; }
.boxc { grid-area: third; background: lightgreen; }
.boxd { grid-area: last; background: grey; }

@media ( max-width: 700px) {
  .box-wrapper {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas: "  last   last  "
                         " first  second " 
                         " first   third ";
  }
}

* { margin: 0; padding: 0; }

/* for placing and styling numbers only */
.box-wrapper > div {
  font-size: 1.5em; display: flex; align-items: center; justify-content: center; }

<div class="box-wrapper">
  <div class="boxa">1</div>
  <div class="boxb">2</div>
  <div class="boxc">3</div>
  <div class="boxd">4</div>
</div>

More information:

Is it possible for flex items to align tightly to the items above them?

Michael, thanks for responding. I did come up with a workaround by nesting flexboxes but your answer is a better solution. — randiferous, Feb 07 '19 at 22:59
You're welcome. [Browser support for CSS Grid](https://stackoverflow.com/a/46060829/3597276) is quite strong in 2019. — Michael Benjamin, Feb 07 '19 at 23:02
Nesting containers is a common way to get around flexbox grid limitations. But it adds bloat to your HTML and eliminates your ability to use the `order` property on flex items, as they are no longer siblings. — Michael Benjamin, Feb 07 '19 at 23:04

Re-arranging flexbox layout for mobile view

1 Answers1