html - How to change side by side divs to stack on mobile? -

i trying 2 divs (which side side) change stacked divs when viewed on mobile shown in fiddle, "two on top , "one" second.

here code - http://jsfiddle.net/d3d4hb3t/

.one {      border: 1px solid green;      width: 29%;      float: left;      height: 100px;  }  .two {      border: 1px solid blue;      width: 69%;      float: right;      height: 100px;  }  @media (max-width: 767px) {      .one {          width: 100%;      }      .two {          width: 100%;      }  }

<div class="one">one</div>  <div class="two">two</div>

i know simple solution swap divs 1 , 2 around, since code have complicated, hoping there easier solution using css.

update

added flexbox approach below:

upated jsfiddle

.wrap {    display: flex;  }    .one {    width: 30%;    border: 1px solid green;  }    .two {    width: 70%;    border: 1px solid blue;  }    @media (max-width: 767px) {    .wrap {      flex-direction: column-reverse;    }    .one,    .two {      width: auto;    }  }

<div class="wrap">    <div class="one">1</div>    <div class="two">2</div>  </div>

original answer

if you're stuck markup, can still use magic css table layout change order of 2 divs. updated all, keep consistency.

how display values work, mdn:

display: table; - behaves <table> element.

display: table-cell; - behaves <td> element.

display: table-header-group; - behaves <thead> element.

display: table-footer-group; - behaves <tfoot> element.

updated jsfiddle

.wrap {    display: table;    border-collapse: collapse;    width: 100%;  }    .one,  .two {    display: table-cell;  }    .one {    width: 30%;    border: 1px solid green;  }    .two {    width: 70%;    border: 1px solid blue;  }    @media (max-width: 767px) {    .one {      display: table-footer-group;      width: 100%;    }    .two {      display: table-header-group;      width: 100%;    }  }

<div class="wrap">    <div class="one">1</div>    <div class="two">2</div>  </div>