报纸布局与CSS

Question

是否可以使用css更改布局，就像报纸一样，无论是在移动设备还是在桌面上都可以按顺序显示文章，而无需使用双dom元素或javascript（文本当然是假设要动态加载）

请参阅jsfiddle

或代码

<div style="width:100%">
<div class="innerWrapper">
    <h4>1</h4>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </p>
</div>
<div class="innerWrapper">
    <h4>2</h4>
    <p>
        Lorem ipsum
    </p>
</div>
<div class="innerWrapper">
    <h4>3</h4>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </p>
</div>
<div class="innerWrapper">
    <h4>4</h4>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </p>
</div>

CSS

    .innerWrapper{
    width:49%;
    float:left;
    border:1px gray solid;
}
@media only screen and (max-width: 400px) {
    .innerWrapper{
        width:100%;
        float:left;
        border:1px gray solid;
    }
}