Html 400px的CSS媒体查询isn'；行不通

有人能告诉我如何解决这个媒体查询问题吗

---

我希望在400px时隐藏内容列，而不破坏黄色的右浮动，因此蓝色和黄色无缝接触，并在400px或更小的位置隐藏红色。问题之一是#左和#右的宽度都是200px。当浏览器小于400px时，div被强制堆叠。如果将它们的宽度都设置为50%，并使用

float:left

，则它们可以并排放置。 您还需要为#right创建媒体查询，并将原始的#right css移到媒体查询上方

这里有一个解决方案

---

Codepen:

寻求调试帮助的问题（“为什么此代码不起作用？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现这些问题所需的最短代码。没有明确问题陈述的问题对其他读者没有用处。请参见：如何创建。你想调试的代码应该在问题本身。这主要是有效的，但对我来说，当我达到400时，它会包装或破坏div，使其不再可见。你能调整代码笔使其在最小分辨率或更低分辨率下工作吗？@PeterHerz他提供了一个工作代码笔并解释了问题所在。你会做出什么不同的行为？

  .clear { clear: none; display: none; }