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

在桌面设备中，它会显示如下内容：

  

这是第一行

     

这是第二行

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

  

这是第二行

     

这是第一行

Answer 1

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

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

桌面版

和flex-direction: column

这是一个codepen：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;
    }
  }

原帖：

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

看看this fiddle并调整结果框大小，背景也会改变，所以你不要错过它： - ）

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;