rearrange divs when scaling

Question

Is it possible to "rearrange" my div-blocks when i scale the window down? For example should the red div appear before the blue div, when i scale down to 0-770px width window. But when the window is min. 771px, the blue div should appear before the red div.

Im not sure it is possible withut Javascript, but a solution without javascript is deffintly preferable.

Thank you!

@charset "utf-8";

/* CSS Document */

#wrapper {
  width: 1000px;
  height: auto;
  background-color: grey;
}

#boks-green {
  width: 50%;
  background-color: green;
  height: 400px;
  display: block;
  float: left;
}

#boks-blue {
  width: 50%;
  background-color: deepskyblue;
  height: 400px;
  display: block;
  position: relative;
  float: left;
}

#boks-red {
  width: 50%;
  background-color: red;
  height: 400px;
  display: block;
  position: relative;
  float: left;
}

#boks-purple {
  width: 50%;
  background-color: purple;
  height: 400px;
  display: block;
  position: relative;
  float: left;
}

@media only screen and (max-width: 770px) {
  #boks-green {
    width: 100%;
    background-color: green;
    height: 400px;
    display: block;
    float: left;
  }
  #boks-blue {
    width: 100%;
    background-color: deepskyblue;
    height: 400px;
    display: block;
    position: relative;
    float: left;
  }
  #boks-red {
    width: 100%;
    background-color: red;
    height: 400px;
    display: block;
    position: relative;
    float: left;
  }
  #boks-purple {
    width: 100%;
    background-color: purple;
    height: 400px;
    display: block;
    position: relative;
    float: left;
  }
}

<div id="wrapper">
  <div id="boks-green">
  </div>

  <div id="boks-blue">
  </div>

  <div id="boks-red">
  </div>

  <div id="boks-purple">
  </div>

</div>

This is possible with [flexbox and order](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-9). — jrenk, Aug 07 '17 at 13:46
Possible duplicate of [Swap DIV position with CSS only](https://stackoverflow.com/questions/17455811/swap-div-position-with-css-only) — razemauze, Aug 07 '17 at 13:46
with float and known height, you can play with the block formating context and swap red and blue boxes https://codepen.io/anon/pen/dzNBdL clear and overflow — G-Cyrillus, Aug 07 '17 at 13:52

MisterJ · Answer 1 · 2017-08-07T14:02:40.783

2

If you might consider using flexbox, which is nowadays quite well supported, you can easily do this.

First you will need media queries, then if your container is a flex container, you can use the order attribute on the children to choose where the element should be displayed.

So I would use :

#boks-blue { 
 order: 1;
}

#wrapper { 
  display: flex;
  flex-direction: column;
}

inside of your media-query.

You can learn more about flexboxes here or you can digg deeper in a very interactive way here.

edited Aug 07 '17 at 14:02

answered Aug 07 '17 at 13:47

MisterJ

919
1
9
24

But when the wrapper is "display:flex" my divs doesnt go under each other, but aligns horisontal – Adrian Kirkegaard Aug 07 '17 at 13:57
1

You can change this with the `flex-direction` of the wrapper. It can take the values `row` (default), `column`, `row-reverse` and `column-reverse`. So you should put it to `flex-direction: column`. I added some docs on the main answer. – MisterJ Aug 07 '17 at 14:01
@AdrianKirkegaard if this solution solved your problem you should accept it. – MisterJ Aug 08 '17 at 10:56

rearrange divs when scaling

1 Answers1