如何将并排的 div 更改为在移动设备上堆叠？答案

【问题标题】：How to change side by side divs to stack on mobile?如何将并排的 div 更改为在移动设备上堆叠？
【发布时间】：2015-09-29 09:12:41
【问题描述】：

我正在尝试让我的 2 个 div（并排）在移动设备上查看时更改为堆叠的 div，如小提琴所示，但我希望“两个在顶部，一个”在第二个.

这是代码 - http://jsfiddle.net/d3d4hb3t/

.one {
  border: 1px solid green;
  width: 29%;
  float: left;
  height: 100px;
}

.two {
  border: 1px solid blue;
  width: 69%;
  float: right;
  height: 100px;
}

@media (max-width: 767px) {
  .one {
    width: 100%;
  }
  .two {
    width: 100%;
  }
}

<div class="one">one</div>
<div class="two">two</div>

我知道简单的解决方案是交换 div 1 和 2，但由于我的代码很复杂，我希望有一个更简单的解决方案，只使用 CSS。

【问题讨论】：

在您的 HTML 中交换 div 的顺序，它可以在不更改任何 CSS 的情况下工作 - 演示...jsfiddle.net/d3d4hb3t/1
只是交换，它会比什么都容易。

标签： html css responsive-design media-queries

【解决方案1】：

考虑到您不想交换它们。这是小提琴：https://jsfiddle.net/c8x49afg/ 只需将相对位置用于 div 将第二个向上拉并向下推第一个。

.one {
  border: 1px solid green;
  width: 29%;
  float: left;
  height: 100px;
}

.two {
  border: 1px solid blue;
  width: 69%;
  float: right;
  height: 100px;
}

@media (max-width:767px) {
  .one {
    position: relative;
    top: 110px;
    width: 100%;
  }
  .two {
    position: relative;
    top: -100px;
    width: 100%;
  }
}

<div class="wrapper">
  <div class="one">
    one
  </div>


  <div class="two">
    two
  </div>
</div>

【讨论】：

【解决方案2】：

更新

在下面添加了一个 flexbox 方法：

UPATED JSFIDDLE

.wrap {
  display: flex;
}

.one {
  width: 30%;
  border: 1px solid green;
}

.two {
  width: 70%;
  border: 1px solid blue;
}

@media (max-width: 767px) {
  .wrap {
    flex-direction: column-reverse;
  }
  .one,
  .two {
    width: auto;
  }
}

<div class="wrap">
  <div class="one">1</div>
  <div class="two">2</div>
</div>

原答案

如果您对标记不满意，您仍然可以使用神奇的 css 表格布局来更改 2 个 div 的顺序。我全部更新了，只是为了保持一致性。

display 的值如何工作，来自MDN：

display: table; - 行为类似于 <table> 元素。

display: table-cell; - 行为类似于 <td> 元素。

display: table-header-group; - 行为类似于 <thead> 元素。

display: table-footer-group; - 行为类似于 <tfoot> 元素。

UPDATED JSFIDDLE

.wrap {
  display: table;
  border-collapse: collapse;
  width: 100%;
}

.one,
.two {
  display: table-cell;
}

.one {
  width: 30%;
  border: 1px solid green;
}

.two {
  width: 70%;
  border: 1px solid blue;
}

@media (max-width: 767px) {
  .one {
    display: table-footer-group;
    width: 100%;
  }
  .two {
    display: table-header-group;
    width: 100%;
  }
}

<div class="wrap">
  <div class="one">1</div>
  <div class="two">2</div>
</div>

【讨论】：

【解决方案3】：

在无法在移动设备上更改源顺序的企业 CMS 中工作时，我需要做这件事。

我使用的解决方案是为两个 Div 设置一个通用容器并将其显示为表格。然后，您可以将要首先显示的 Div 设置为 display:table-group-header 并将其后显示的 Div 设置为 display:table-group-footer

如果您想保留彩色边框，您可能必须为每个包含您的内容的 div 引入一个内部 div。

我创建了一个 Fiddle 来展示它的实际效果： http://jsfiddle.net/0brc4xc7/

【讨论】：