[First image](https://i.stack.imgur.com/uKiKy.png)
[Second image](https://i.stack.imgur.com/PMHvI.png)

In the first image, the right column is as it should be, but at 767px(second image) I want it to go under the left column and be 100% wide. But, it spans all the way from the top and not from the "Tech skills" heading.
How do I fix this?

```
.left-column,
.right-column{
    display: block;
    float: left;
    margin: 1% 0 1% 1.6%;
}
.left-column,
.right-column{
    width: 49.2%;
}
.left-column{
    margin-left: 0;
}
.row {
    zoom: 1; 
}
.row:before,
.row:after {
    content:"";
    display:table;
}
.row:after {
    clear:both;
}

@media only screen and (max-width: 767px){

.left-column,
.right-column{
    width: 100%;
}

.right-column{
    float: none;
}

```