响应式，桌面视图中有 3 列，移动视图中有 2 列

Question

当用户使用手机时如何将 3 列缩放为两列。我可以了解很多关于媒体查询的知识，但我不知道该怎么做。像这样：

http://postimg.org/image/sox89ekqj/

Answer 1

使用 Twitter Bootstrap，就是这样完成的

使用 col-**-4 为桌面版定义 3 列部分，然后使用 col-**-6 移动版。当总列数超过 12 时，它会将第 12 列上的所有内容换行。

Answer 2

我只是给你举两个例子，告诉你如何做到这一点，因为有很多方法可以实现你想要的。

使用 display:table 和 display:table-cell

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}
section {
  display: table;
  width: 100%
}
div {
  display: table-cell;
  border: 1px solid red;
  padding: 5px;
  width: 33%;
  height: 200px
}

@media(max-width:480px){
div {
  width: 50%
}
div:last-child {
  display: none
}

<section>
  <div></div>
  <div></div>
  <div></div>
</section>

使用display:inline-block

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}
section {
  font-size:0
}
div {
  display: inline-block;
  border: 1px solid red;
  padding: 5px;
  width: 33.3%;
  height: 200px
}

@media(max-width:480px){
div {
  width: 50%
}
div:last-child {
  display: none
}

<section>
  <div></div>
  <div></div>
  <div></div>
</section>

编辑

由于 OP 的评论，margin 可能的解决方案。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}
section {
  border: 2px solid green;
  height: 204px;
}
div {
  float: left;
  background-color: red;
  margin-right: 2%;
  width: 32%;
  height: 200px
}
div:last-child {
  margin-right: 0
}
@media(max-width:480px){

div {
  width: 49%
}
div:nth-child(2) {
  margin-right: 0;
}
div:last-child {
  display: none;
}

<section>
  <div></div>
  <div></div>
  <div></div>
</section>