html - 固定位置 div 在大屏幕上的可扩展放置

Question

我有一个单列布局，其中有几个垂直堆叠的 div。然而，一旦屏幕足够宽，最上面的 div 应该移到第二列并有一个固定的位置。

目前我在这个 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 and (min-width: 900px) {
  .red {
    position: fixed;
    left: 500px;
  }
}
.blue {
  background-color: blue;
  width: 400px;
  height: 2000px;
}

我的问题是:是否有不需要知道列的宽度来硬编码固定 div 的位置的更具可扩展性的解决方案？每次向一列添加内容时，我都必须调整该偏移量。我正在寻找一些 CSS 魔术或者我可以使用的小型框架或库。

我使用的其他库是:react、stylus、lodash、jquery、normalize.css

Answer 1

https://jsfiddle.net/u09dpgot/

一个额外的包装 div:

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

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

  </div>
</div>

flex css(顺序在浏览器中可视化更改 html 元素的顺序):

.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 and (min-width: 900px) {
  .red {
    order:2;
  }

  .blue {
    order:1;
  }
}

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