html - 在右侧 float div，然后在窄屏幕下方下降

Question

我正在尝试实现如下所示的效果:

在我的网站 ( http://new.freshsourdoughexpress.com/contact/ ) 上，但我想不出正确的 HTML 和 CSS 来让它工作。让 map 在右侧 float 的唯一方法是将 iframe 放在文本 div 之前，但是当我缩小宽度时，我不能让 map 下降到文本下方。我目前没有想法，所以我希望其他人可以指出显而易见的问题。谢谢!

编辑 - 抱歉，我在快出门时发布了此信息，但没有发布足够的信息。我目前确实有一个响应式布局(WP 20 13 主题)。如果我将文本 div 设置为 float: left 并将 map iframe 设置为 float: right 文本 div 占据 100% 的宽度并且 map 下降到下方。我试图不在文本 div 上设置宽度，因为我希望它能够随窗口调整大小。 (我试图保持 map 的尺寸​​不变，并调整文本大小以适合。在文本上使用百分比宽度需要我对 map 做同样的事情，我尽量不这样做。)

如果我将 iframe 放在我的 HTML 中的第一个位置，那么 map 将停留在顶部(GIF 的前三帧)而不设置宽度(以 px 或 % 为单位)，但是我无法拥有 map 放在文本下方。为了获得最后一帧，我必须将 iframe 移回文本下方。

所以我想知道是否有可能在不为文本 div 定义宽度的情况下得到我想要的东西。如果没有，我想我可以接受 map 大小调整。不过，我试图在没有它的情况下做到这一点。

Answer 1

使用@media 查询，像这样

.rightcol { float: right; }
@media (max-width: 600px) {
   .rightcol { float: none; }
}

这将在屏幕尺寸为 600px 或更小的所有设备上设置 .rightcol float: none 并保持 float: right休息。您当然可以将 600px 更改为您喜欢的任何数字。