如何在调整大小时折叠另一个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%;
  }
}

使用媒体查询和最大宽度：600px设置你的分辨率你希望右栏落入新行......