4

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>

3
  • 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, 2016 at 9: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, 2016 at 10:07
  • 1
    What i mean is you can achieve it with this: 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, 2016 at 11:03

1 Answer 1

4

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

1
  • 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, 2018 at 9:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.