如何在移动设备上更改两个div的顺序？

Question

我试图在容器中的两个 div 达到移动尺寸时更改它们的顺序。

<div class="container">
    <div class="div1"></div>
    <div class="div2"></div>
</div>

是否可以更改它，使其更改为

<div class="container">
    <div class="div2"></div>
    <div class="div1"></div>
</div>

Answer 1

根据您需要支持的浏览器，您可以使用flexbox来切换div的顺序。

.container {
  display: flex;
}
.div1 {
  order: 0;
}
@media screen and (min-width: 780px)  {
  .div1 {
    order: 1;
  }
}

JS 小提琴

Answer 2

您可以使用 Flexbox 通过颠倒顺序来完成此操作。

.container {
  display: flex; /* or inline-flex */
  flex-direction: column;
}
@media(min-width:768px){
  .container {
    flex-direction: column-reverse;
  }
}

http://codepen.io/partypete25/pen/oxJNqz

Answer 3

更新

截至 2024 年，来自 @partypete25 @moettinger 的答案更合适。

原答案

你可以使用纯CSS来做到这一点

.container{
    display:table;
}
.div1{
    display:table-footer-group;
}
.div2{
    display:table-header-group;
}

确保将其放入@media 查询中。

Answer 4

您可以使用两个单独的类，并根据介质宽度一次仅显示一个类。

首先创建CSS

//This container is only visible on devices with 1025px or more such as iPad in landscape or portrait view
@media screen and (min-width: 1025px)  {
    .desktop-container {
    Display:none;
    }
 }


// This container is only visible on smaller devices with screen size 360px - 1024px
@media screen and (min-width:360px) and (max-width:1024px) {
    .mobile-container {
     Display:none;
    }
 }

现在创建您的标记...

<div class="desktop-container">
  <div class="div1"></div>
  <div class="div2"></div>
</div>

<div class="mobile-container">
  <div class="div2"></div>
  <div class="div1"></div>
</div>