How to setup two column responsive layout with a image

Sometime we need to have a left column with text or image and a right column with a few text or image that will flow into a single column when resized or viewed from a mobile.

This can be easily done by using the following code.

HTML CODE

<div class="thecontainer">
    <div class="left">
        <p> Your text or image here </p>
    </div>
    <div class="right">
         <p> Your text or image here </p>
    </div>
</div>

CSS

.left {
    float: left;
    width: 50%;
}
.right {
    float: right;
    width: 50%;
}
.thecontainer:after {
    content:"";
    display: table;
    clear: both;
}
img {
    max-width: 100%;
    height: auto;
}
@media screen and (max-width: 480px) {
    .left, 
    .right {
        float: none;
        width: auto;
    }
}