css - 如何在调整大小时折叠另一个 div 下的 div？

Question

我有一个左栏和一个右栏。当我将浏览器缩小时，右栏会溢出到左侧。我希望右栏只折叠在左下方。我怎样才能做到这一点？

<div class = "container">
<div class = "left-column"> A bunch of content </div>
<div class = "right-column"> A bunch of more content </div>
</div>

.container { width: 100%; }
.left-column { width: 50%; }
.right-column { width: 50%; }

Answer 1

没有看到任何代码很难知道。

我通常这样做width:100%;或display:block取决于..

Answer 2

@media screen and (max-width: 600px){

  .right-column{
    float:none;
    display:block;
    width:100%;
  }
}

为此使用媒体查询并在 max-width: 600px 上设置您的分辨率，您希望右列在哪里落入新行...