Html 缩放页面时CSS div垂直堆叠

我的页面有两列，如下所示：

|1 | | 2|

第1列的宽度为80%，第2列的宽度为20%，并向右浮动。 第一栏有很多措辞和文字，而第二栏里面只有一个小表格

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

|二,|

|1|

有什么建议吗？我不知所措

---

如果有什么不同的话，我正试图在WordPress中这样做。

使用媒体查询来定位您的设备，并在标记中将侧栏置于内容栏之上<代码>浮动：右侧栏，浮动：左要在桌面上正常显示的内容列。使用

媒体查询

将它们

清除：两者都清除并移除浮动


CSS（使用100%包装更新）

HTML

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


使用媒体查询为您想要的屏幕大小设置样式。这里有一个网站列出了其中的许多


在媒体查询的内部设置这些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。
是否有指向HTML或CSS的链接？是的，请发布您迄今为止的内容，以便我们进行必要的修改2可能的替代方案：1。响应性设计。2.给他们
min width
，当他们到达时，他们将自动在单独的行中。我尝试使用：并添加了宽度百分比，但我使每列都有不同的类名，因为它们都有不同的属性（主要是边框样式和浮动：右；对于第二列），听起来不太正确。。清除两者将防止它们并排。如果.wrapper是100%，而不是960px，它会改变什么吗？不，不会的。我已经更新了我的代码和草图，这是一个截图。太棒了！如果答案对你有帮助，别忘了“接受”它：）我有一个问题；右手边似乎有一些剪辑。我有没有办法解决这个问题？
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    .one, .two {
        width: 100%;
    }
}