html - Change float behaviour of div elements -

i have following divs:

html:

<div class="side left">     <span>left</span> </div> <div class="side right">       <span>right</span> </div> 

css:

.side  {   height: 100px;          width: 400px;   float: left; } .left{ background-color: red;} .right{ background-color: blue;} 

fiddle: http://jsfiddle.net/39xn180y/

when minimize browser-window width float way:

question: there easy (css) way make them float way without changing html:

you can flexbox , media queries. flexbox can change order of elements , @media queries can set when change order. here fiddle

body {    display: flex;    margin: 0;    padding: 0;  }    .side {    height: 100px;    flex: 0 1 400px;  }    .left{ background-color: red; text-align: center;}  .right{ background-color: blue; text-align: center;}    @media(max-width: 800px) {    body {      flex-wrap: wrap;    }        .left {      order: 2;    }  }

<div id="start" class="side left">      <span>left</span>  </div>  <div id="end" class="side right">      <span>right</span>  </div>