用 CSS 改变 div 布局？ （交替的div）

Question

我正在为 WordPress 编写一个插件。布局如下，横排显示：

<div class="row">
    <div class="thumbnail">
    <div class="information">
</div>

PHP 函数交替使用 div，因此每隔一行的顺序相反，如下所示：

<div class="row">
    <div class="information">
    <div class="thumbnail">
</div>

这一切都在全屏页面中进行，但在较小的屏幕上，我希望“行”垂直不交替显示。

所以我想先显示缩略图，然后再显示每一行的信息。

当添加 @media 语句以使 div 弹出时，由于交替的 div，我得到了错误的顺序，如下所示：
第一个缩略图
第一信息
第二信息
第二个缩略图

所以我想知道是否甚至可以通过 CSS 进行更改？尝试了很多不同的花车和第 n 个孩子，但我最终得到了相同的结果。

这是一个 jsbin，用于显示我正在使用的布局： JSBIN

Answer 1

您可以将order 与媒体查询或min-width 一起使用来设置断点。

.row {
  margin: 0;
  padding: 0;
  height: 100%;
  display: flex;
  flex-wrap:wrap;
}

.information {
  flex: 1;
  padding: 5%;
  min-width:250px;/* set a breakpoint at 500px where thumb is set at 50% */
}

.thumbnail {
  flex: 1;
  min-width: 50%;/* min-width will allow to spray on the whole line when alone */
  background: teal;  
}
@media screen and (max-width: 640px) {
.row:nth-child(odd) .thumbnail {
  order:1;
}
  }

<div class="row">
    <div class="thumbnail">thumb</div>
    <div class="information">information goes here</div>
  </div>
    <div class="row">
    <div class="information">information goes here</div>
    <div class="thumbnail">thumb</div>
  </div>
    <div class="row">
    <div class="thumbnail">thumb</div>
    <div class="information">information goes here</div>
  </div>

最小宽度+订单http://jsbin.com/xupurikuxu/1/edit?html,css,output

媒体查询http://jsbin.com/senobugubi/1/edit?html,css,output