Flexbox: reorder and stack columns

Question

I have three columns, which I want to swap the order of at a certain screen size.

The current order is two 1/4 width columns with a 1/2 width in between.

I want to make the two 1/4 width columns into 1/2 widths, and stack them at the beginning.

I can replicate it using floats, but can't figure out a way using flexbox.

I'm struggling to get the two 1/4 width columns to stack whilst being 50% of the parent width.

Here is a fiddle.

.col1of2 {
  width: 50%;
  background: red;
}
.col1of4 {
  width: 25%;
  background: yellow;
}
.col1of4--last {
  background: blue;
}
.col-container {
  display: flex;
}
@media all and (max-width: 1000px) {
  .col1of2 {
    order: 3;
  }
  .col1of4 {
    order: 1;
  }
}
/* css for working example */

.ex1of2 {
  width: 50%;
  background: red;
  float: right;
}
.ex1of4 {
  display: inline-block;
  width: 50%;
  background: yellow;
}
.ex1of4--last {
  background: blue;
}

<H4>what i have</H4>
<div class="col-container">
  <div class="col col1of4">
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
  </div>
  <div class="col col1of2">
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
  </div>
  <div class="col col1of4 col1of4--last">
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
  </div>
</div>

<!-- what i want it to look like when it swaps -->

<H4>what i want to achieve</H4>
<div class="ex-container">
  <div class="ex ex1of4">
    <div class="ex__inner">sssadksadkaslkslasasldkasddsa</div>
    <div class="ex__inner">sssadksadkaslkslasasldkasddsa</div>
  </div>
  <div class="ex ex1of2">
    <div class="ex__inner">sssadksadkaslkslasasldkasddsa</div>
    <div class="ex__inner">sssadksadkaslkslasasldkasddsa</div>
    <div class="ex__inner">sssadksadkaslkslasasldkasddsa</div>
    <div class="ex__inner">sssadksadkaslkslasasldkasddsa</div>
  </div>
  <div class="ex ex1of4 ex1of4--last">
    <div class="ex__inner">sssadksadkaslkslasasldkasddsa</div>
    <div class="ex__inner">sssadksadkaslkslasasldkasddsa</div>
  </div>
</div>

This is easily achievable if you have a fixed height on the parent, but i don't like that solution myself. Not sure if this can be achieved with `flex-direction: row;` — Dan Gamble, Sep 22 '16 at 09:53
Each of my `col1of2` and `col1of4` have a fixed height, with the `col1of2` just basically being double the size. I tried using flex direction `column` but couldn't work out a way to get it working with the larger box going the opposite way. — Sam Willis, Sep 22 '16 at 10:07
What i mean is you can achieve it with this: https://jsfiddle.net/bL0m856o/ but this is really restrictive on content and won't work very well at all if you want it to be dynamic — Dan Gamble, Sep 22 '16 at 11:03

Michael Benjamin · Accepted Answer · 2016-09-22T11:26:09.600

The key to this layout is switching the flex container to column wrap in the media query.

You also have to define a height for the container, so the items know where to wrap.

.col-container {
  display: flex;
}
.col1of2 {
  width: 50%;
  background: red;
}
.col1of4 {
  width: 25%;
  background: yellow;
}
.col1of4--last {
  background: blue;
}
@media all and (max-width: 1000px) {
  .col-container {
    flex-direction: column;
    flex-wrap: wrap;
    height: 100px;
  }
  .col1of2 {
    order: 1;
  }
  .col1of4 {
    width: 50%;
  }
}

<div class="col-container">
  <div class="col col1of4">
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
  </div>
  <div class="col col1of2">
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
  </div>
  <div class="col col1of4 col1of4--last">
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
  </div>
</div>

revised fiddle

For Bootstrap 3, I needed only `display: flex` and `flex-wrap: wrap` for this to work! (had to change the `row` class to flex to use the `align-items: center` property, to be able to align all columns vertically) — interDist, Sep 21 '18 at 09:24

Flexbox: reorder and stack columns

1 Answers1

Linked