根据窗口大小更改列数

Question

是否可以仅使用CSS更改布局,因此当窗口大小<x时,我在一列上的文本宽度为100%,当窗口> = x时,将其设为两列,每个宽度设置为50%？

例如:

一栏:

first part of the example text
second part of the example text

两列:

first part of the                 second part of the
example text                       example text

Answer 1

尝试使用媒体查询 - DEMO

div {
    border: 1px solid #c00;
}

@media only screen and (min-width: 481px) {
    div { 
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
        float: left;
        width: 50%; 
    }
}?