*
{
    box-sizing: border-box;
}

.responsiveLeft
{
    padding: 1px;
    float: left;
    width: 20%; /* The width is 20%, by default */
}

.responsiveLeft120
{
    padding: 1px;
    float: left;
    width: 120;
    background-color: #99FF99;
}

.responsiveMain
{
    padding: 1px;
    float: left;
    width: 60%; /* The width is 60%, by default */
}

.responsiveMain100
{
    padding: 1px;
    float: left;
    width: 100%; /* The width is 60%, by default */
    background-color: #99FF99;
}

.responsiveRight
{
    padding: 1px;
    float: left;
    width: 20%; /* The width is 20%, by default */
}

/* Use a media query to add a break point at 800px: */
@media screen and (max-width: 800px)
{
    .responsiveLeft, .responsiveMain, .responsiveRight, .responsiveLeft120, .responsiveMain100
    {
        width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
    }
}