[CSS]-在移动设备上预览时交换行

Question

我没有使用任何框架，例如 bootstrap，它提供类，例如 push 或 pull 来实现与我想要实现的类似的目标。我想知道的是，使用基本 css，可以实现交换元素的技巧，这些元素在桌面视图中依次排列，但在移动设备上查看时，顺序会发生变化。

HTML

<div id='cover'>
  <div>
    <p>This is first row</p>
  </div>
  <div>
    <p>This is second row</p>
  </div>
</div>

CSS

#cover div{
  background-color: #f3f3f3;
  border: 1px solid black;
  text-align: center;
}

在桌面上，它会显示类似：

This is first row

This is second row

在移动设备上，它应该交换并显示如下：

This is second row

This is first row

Answer 1

你可以像这样使用 flexbox（在移动设备的媒体查询中）：

#cover div{
  background-color: #f3f3f3;
  border: 1px solid black;
  text-align: center;
  display: flex;
  flex-direction: column-reverse
}

和flex-direction: column桌面版

这是一个代码笔：http://codepen.io/anon/pen/GZeRQq

Answer 2

编辑：

虽然我的方法确实有效，但我建议使用@Johannes 的解决方案

以下是如何将它与媒体查询一起使用。

  #cover {
    background-color: #f3f3f3;
    border: 1px solid black;
    text-align: center;
    display: flex;
  }

  @media screen and (max-width: 1000px) {
    #cover {
      flex-direction: column-reverse;
    }
    body {
      background: orange;
    }
  }

  @media screen and (min-width: 1001px) {
    #cover {
      flex-direction: column;
    }
    body {
      background: blue;
    }
  }

原文Post:

如果你想要一个纯粹的 css 解决方案，你最好的选择（我认为）是使用显示：table

查看 this fiddle 并调整结果框的大小，背景也会发生变化，以免您错过它:-)

#cover {
  display: table;
  border: 1px solid black;
  width: 100%;
}

#cover div {
  background-color: #f3f3f3;
  text-align: center;
}

@media screen and (max-width: 600px) {
  .first {
    display: table-footer-group;
  }
  .second {
    display: table-header-group;
  }
  body {
    background: orange;
  }
}

@media screen and (min-width: 601px) {
  .first {
    display: table-header-group;
  }
  .second {
    display: table-footer-group;
  }
  body {
    background: blue;
  }
}

<div id='cover'>
  <div class="first">
    <p>This is first row</p>
  </div>
  <div class="second">
    <p>This is second row</p>
  </div>
</div>

[CSS]-在移动设备上预览时交换行

[CSS]-swap row when previewed on mobile device

html

css

responsiveness