html - Scalable placement of fixed position div on large screen -

i have 1 column layout several divs stacked vertically. topmost div should move second column , have fixed position once screen wide enough.

currently use in fiddle: https://jsfiddle.net/l3u3xqdu/1/

html:

<div class="red"> </div> <div class="blue"> </div> 

css:

.red {   background-color: red;   width: 400px;   height: 400px;   } @media screen , (min-width: 900px) {   .red {     position: fixed;     left: 500px;   } } .blue {   background-color: blue;   width: 400px;   height: 2000px; } 

my question is: there more scalable solution not require knowing width of column hardcode position of fixed div? have adapt offset every time add 1 column. searching css magic or maybe small framework or library can use.

my other libraries use are: react, stylus, lodash, jquery, normalize.css

https://jsfiddle.net/u09dpgot/

an wrapper div:

<div class="colwrap">   <div class="red">    </div>   <div class="blue">    </div> </div> 

flex css (order changes order of html elements visually in browser):

.colwrap {   display:flex;   flex-wrap:wrap; }  .red, .blue {   flex:0 0 400px; }  .red {   background-color: red;   height: 400px;   }  .blue {   background-color: blue;   height: 2000px; }  @media screen , (min-width: 900px) {   .red {     order:2;   }    .blue {     order:1;   } } 

https://css-tricks.com/snippets/css/a-guide-to-flexbox/