当缩小页面时，CSS会垂直分割堆栈

Question

我有一个包含两列的页面，如下所示：

| 1 | | 2 |

第1列的宽度为80％，第2列的宽度为20％，并向右浮动。 第一栏有很多措辞和文本，而第2列只有一个小的形式。

当在智能手机上查看页面时，我希望第2列在第1列上方垂直堆叠，如下所示：

| 2 |

| 1 |

有什么建议吗？我很茫然。

我正在尝试在WordPress中执行此操作，如果这有任何区别。

Answer 1

使用媒体查询定位您的设备，并将侧栏放在标记中的内容列上方。 float: right;侧栏，float: left;内容列在桌面上正常显示。使用media-query让他们clear: both;并移除浮动。

CSS （使用100％包装器更新）

.wrapper {
  overflow: hidden;
  min-width: 300px;
  width: 100%;
}

article {
  background: #efefef;
  float: left;
  width: 80%;
}

aside {
  background: #ccc;
  float: right;
  width: 20%;
}

@media only screen and (max-width : 320px) {
  aside, article {
    clear: both;
    float: none;
    width: 100%;
  }
}

<强> HTML

<div class='wrapper'>
  <aside>Sidebar with form</aside>
  <article>Content content content ...</article>
</div>

Codepen sketch.

Answer 2

使用媒体查询设置您要瞄准的屏幕尺寸的样式。这是一个列出其中许多内容的网站。

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

媒体查询内部为这些div设置样式。

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    .one, .two {
        width: 100%;
    }
}

如果您希望它在桌面上显示响应，请将min-device-width和max-device-width设置为min-width和max-width。