How to reorder divs on smaller screens?

Question

I need to reorder the div when the screen size is less than 480px.

I do not want to use it position: absolute, because the height of the green area may depend on the amount of text.

I need the small screen to look red, green, red, green, red, green (each red color was on top of green and 100% wide).

Any idea? Many thanks

*, html, body {
    margin: 0;
    padding: 0;
}

.container {
    width: 100%;
    display: inline-block;
    box-sizing: border-box;
}

.full_half {
    display: inline-block;
    width: 50%;
    background-color: green;
    float: left;
    min-height: 100px;
}

.pic {
    background-color: red;
    height: 100px;
}

.text {
    box-sizing: border-box;
    padding: 20px 120px;
}

@media screen and (max-width: 480px) {
    .full_half {
      width: 100%;
    }
    
    .text{
     padding: 0 0 !important;
    }
}

<div class="container">
    <div class="full_half pic"></div>
    <div class="full_half text">test</div>
</div>
<div class="container">
    <div class="full_half text">test</div>
    <div class="full_half pic"></div>
</div>
<div class="container">
    <div class="full_half pic"></div>
    <div class="full_half text">
        dfdfdfdfdfdffdfdfdfdfdfdfdfdfdfdf<br />
        dfdfdfdfdfdffdfdfdfdfdfdfdfdfdfdf<br />
        dfdfdfdfdfdffdfdfdfdfdfdfdfdfdfdf<br />
    </div>
</div>

Run code

DECIDE:

I managed to reorder by applying flexbox to the container (only when the width is less than 480 pixels).

Css change:

@media screen and (max-width: 480px) {
    .container {
      flex-direction: column;
    }
    .pic {
      order: 1;
    }

    .text{
     order: 2;
    }
}

http://jsfiddle.net/vquf7z7b/

Answer 1

CSS Flexbox order x/y div flex-direction.

, :

CSS

.container {
     display: flex; /* NEW */
    /* width: 100%; */
    /* display: inline-block; */
    /* box-sizing: border-box; */
}

@media screen and (max-width: 480px) {
    .full_half {  width: 100%; }
    .text      {  padding: 0 0 !important; }
    .container { flex-direction: column; }         /* NEW */
    .container:nth-child(2) > .pic { order: -1; }  /* NEW */
}

, 480 , divs , - , , , , , .

*,
html,
body {
  margin: 0;
  padding: 0;
}
.container {
  display: flex;
}
.full_half {
  display: inline-block;
  width: 50%;
  background-color: green;
  float: left;
  min-height: 100px;
}
.pic {
  background-color: red;
  height: 100px;
}
.text {
  box-sizing: border-box;
  padding: 20px 120px;
}
@media screen and (max-width: 480px) {
  .full_half {
    width: 100%;
  }
  .text {
    padding: 0 0 !important;
  }
  .container {
    flex-direction: column;
  }
  .container:nth-child(2) > .pic {
    order: -1;
  }
}

<div class="container">
  <div class="full_half pic"></div>
  <div class="full_half text">test</div>
</div>
<div class="container">
  <div class="full_half text">test</div>
  <div class="full_half pic"></div>
</div>
<div class="container">
  <div class="full_half pic"></div>
  <div class="full_half text">
    dfdfdfdfdfdffdfdfdfdfdfdfdfdfdfdf
    <br />dfdfdfdfdfdffdfdfdfdfdfdfdfdfdfdf
    <br />dfdfdfdfdfdffdfdfdfdfdfdfdfdfdfdf
    <br />
  </div>
</div>

flex (.container) , flexbox (flex-direction: row).

order: 0 . div .pic .container an order -1, (div .text 0). 1, , div .pic. order.

flex-direction (row) column, divs . flex-direction.

---

: flexbox IE < 10. , Safari 8 IE10, . , , Autoprefixer. .