I have an example of a simple grid in which when the screen size is less than 767 pixels, all blocks stretch to fill the screen.  

Section 2 moves to the very bottom when this size (767 pixels) is reached. And I have something like this: Section 1, footer, section 2. Is it possible to somehow make section 2 at the very top? (section 2, section 1, footer)

```
* {
    box-sizing: border-box;
  }

.wrapper {
    max-width: 1200px; 
    width: 100%;
    padding: 0 0px;
    margin: 0 auto;
}

.leftcolumn {
    float: left;
    width: 65%;
}

.rightcolumn {
    float: left;
    width: 35%;
    padding-left: 20px;
}

.row:after {
    content: "";
    display: table;
    margin-top: 20px;
}

.footer {
    padding: 20px;
    text-align: center;
    background: rgba(221, 221, 221, 0.3);
    margin-top: 20px;
}

@media screen and (max-width: 767px) {
    .leftcolumn, .rightcolumn {
        width: 100%;
        padding: 0;
    }
}

```

```
    <div class="wrapper">
        <div class="row">
            <div class="leftcolumn">
                1 section
                <div class="footer">
                   footer
                </div>
            </div>

            <div class="rightcolumn">
              2 section
            </div>
        </div>
    </div>

```

Here is what I have now:  

[![enter image description here](https://i.stack.imgur.com/mYCJE.png)](https://i.stack.imgur.com/mYCJE.png)

Here is what I want to get:  

[![enter image description here](https://i.stack.imgur.com/e5TzA.png)](https://i.stack.imgur.com/e5TzA.png)