newspaper layout with css

Question

is it possible, with css, to change the layout like a newspaper so the articles are displayed on order both in mobile and on desktop without having to use double dom elements or javascript (the texts are off course suppose to load dynamically)

see jsfiddle

or code

<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;
    }
}