如何创建 3 列响应式布局？

我有一个 3 列布局。当从桌面访问它时，它显示如下：

-------------------------------------------
| columnleft | columncenter | columnright |
-------------------------------------------

我希望从手机/平板电脑/调整大小浏览器查看它时是这样的：

----------------
| columnleft   |
----------------
| columncenter |
----------------
| columnright  |
----------------

我的示例如下，这是JSFiddle http://jsfiddle.net/XD8RW/1/.

<style>
    .column-left{ float: left; width: 33%; }
    .column-right{ float: right; width: 33%; }
    .column-center{ display: inline-block; width: 33%; }
</style>
<div class="container">
    <div class="column-left">Column left</div>
    <div class="column-center">Column center</div>
    <div class="column-right">Column right</div>
</div>

有很多方法可以做到这一点。首先，您需要使 div 在大屏幕上显示为列，然后使用媒体查询将它们更改为中/小屏幕上的行。

适合所有人的 HTML：

<div class="container">
  <div class="section">1</div>
  <div class="section">2</div>
  <div class="section">3</div>
</div>

1. 弹性盒：

JSFiddle https://jsfiddle.net/c6qgoLmw/

.container {
  display: flex;
}

.section {
  flex: 1; /*grow*/
  border: 1px solid;
}

@media (max-width: 768px) { /*breakpoint*/
  .container {
    flex-direction: column;
  }
}

2. 浮动：

JSFiddle https://jsfiddle.net/e93w86ho/

.container:after { /*clear float*/
  content: "";
  display: table;
  clear: both;
}

.section {
  float: left;
  width: 33.3333%;
  border: 1px solid;
  box-sizing: border-box;
}

@media (max-width: 768px) { /*breakpoint*/
  .section {
    float: none;
    width: auto;
  }
}

3.内联块：

JSFiddle https://jsfiddle.net/8zqqwu1n/

.container {
  font-size: 0; /*remove white space*/
}

.section {
  font-size: 16px; /*reset font size*/
  display: inline-block;
  vertical-align: top;
  width: 33.3333%;
  border: 1px solid;
  box-sizing: border-box;
}

@media (max-width: 768px) { /*breakpoint*/
  .section {
    display: block;
    width: auto;
  }
}

4.CSS表：

JSFiddle https://jsfiddle.net/04vnfw3w/

.container {
  display: table;
  table-layout: fixed; /*euqal column width*/
  width: 100%;
}

.section {
  display: table-cell;
  border: 1px solid;
}

@media (max-width: 768px) { /*breakpoint*/
  .section {
    display: block;
  }
}

5.CSS网格：

JSFiddle https://jsfiddle.net/zs9why1a/

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /*fraction*/
}

.section {
  border: 1px solid;
}

@media (max-width: 768px) { /*breakpoint*/
  .container {
    grid-template-columns: none;
  }
}