用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>

这一切都在全屏页面上进行，但在较小的屏幕上，我希望获得＆＃34; row＆＃34;垂直显示非交替。

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

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

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

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

Answer 1

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

＆＃13;

＆＃13;

.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;
}
  }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

min-width + order http://jsbin.com/xupurikuxu/1/edit?html,css,output

mediaquerie http://jsbin.com/senobugubi/1/edit?html,css,output