Html 如何重新排序 CSS Flexbox

item1   item2
item3   item4
item5   item6

item1
item3
item5
item2
item4
item6

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1 0 50%;
}

@media only screen and (max-width: 520px) {
  .item {
    flex: 100%;
  }
}

<div class="container">
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
  <div class="item">item4</div>
  <div class="item">item5</div>
  <div class="item">item6</div>
</div>

  .item:nth-child(2n - 1) {
    order: -1;
  }

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1 0 50%;
}

@media only screen and (max-width: 520px) {
  .item {
    flex: 100%;
  }

  .item:nth-child(2n - 1) {
    order: -1;
  }
}

<div class="container">
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
  <div class="item">item4</div>
  <div class="item">item5</div>
  <div class="item">item6</div>
</div>

Html相关问答推荐

CSS/添加margin—top到嵌入式facebook帖子

输入表单在奇怪的地方舍入的标签

如何使用css实现悬停时的动画zoom ？

将ANGLE模板高效地迁移到ANGLE 17中引入的新语法

在元素之间添加空格

获得一个css框，以便在页面太小时不再粘在页面的角落.

粘滞的导航栏延伸到超过页边距的右侧

如何使用html和css关键帧创建动画

未在抖动中播放的HTML音频｜｜文本正在工作其他标记正在播放，但音频未播放

Html视频标签：圆角像素化

如何在VB.NET中用打印预览和直接打印的方式在Html中打印数据表的内容，包括页眉/设置纸张/方向/适合页面/总计

如何制作'；在第'；页中搜索；是否发现多个元素中的单词？

rvest： Select 不包含链接的段落(<；p>；)

：after 伪元素没有出现，即使它有 content 属性

在 laravel 中使用 DomPDF 将数据导出为 pdf 时，第二列被拉伸

嵌入最近的 YOUTUBE 视频(不是短片，视频)

视频添加到 Html 与 Github 不同步

将 HTML 元素粘贴到容器底部，而不剪裁其顶部

是否可以为长 huxtable 固定头部？

是否有一种静态方式可以根据暗模式 Select 一张或另一张图像？