在小屏幕上重新排序DIv

Question

我有这样的标记：

  <div class="white img"></div>
  <div class="black img"></div>
  <div class="black img"></div>
  <div class="white img"></div>

，其风格类似于具有以下css的棋盘：

@media (min-width:500px){.img{ 
  float:left;
  width:50%;
  height:50px;}}

@media (max-width:499px){.img{ 
  width:100%;
  height:50px;
  float:none!important;
  }}

.white{  background-color:#fff;float:left}
.black{  background-color:#000;float:left}

在较小的屏幕上，div应交替放置在黑色和白色之下。在这里找到一个工作小提琴：https://jsfiddle.net/bk0arf02/2/

我不能在这里使用css flexbox ，也不能在背景颜色的第n个选择器中使用。将div重新排序为：

的最佳方法

  <div class="white img"></div>
  <div class="black img"></div>
  <div class="white img"></div>
  <div class="black img"></div>

它看起来像：

首选css，如果没有使用jquery？

Answer 1

我使用静态值position和＆＃39; top＆＃39;来实现。但您可以使用jQuery获取每个div高度的高度，将此高度指定为其他div's的顶部。

在这种情况下你有4个div，分别认为它有A，B，C，D。那么如果你想要这样的订单C，B，D，A然后分配C - 顶部0，B - 顶部（C的高度），D - 顶部（B，C的高度）和A - 顶部:( C的高度， B，d）。对于所有div的位置应为absolute。

以下是静态值的示例 Reorder Divs