CF7 dual column responsive style?

Im trying to make a CF7 form that is dual column on desktop but on mobile it stacks itself. I found this topic http://wordpress.org/support/topic/making-a-two-column-form-responsive

They used this CSS code

#left {
    width: 35%;
    float: left;
}  

#right {
    width: 65%;
    float: left;
}  

.clearfix:after {
    content:"020";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    overflow:hidden;
}  

.clearfix {
    display:block;
}  

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea
{
    background-color: #fff;
    color: #000;
    width: 85%;
}

And this code for the CF7 form

<!-- TWO COLUMN FORM -->
<div class="clearfix">
    <div id="left">
        [text name watermark "Name"] <br/>
        [email* your-email watermark "Email"]<br/>
        [text your-phone watermark "Phone"]
    </div>
    <div id="right">
        [text* your-subject watermark "Subject "] <br/>
        [textarea* your-message watermark "Message "]
    </div>
</div>
[submit "Send"]
<!-- /TWO COLUMN FORM -->

So that makes my dual columns, but i dont know how to make then stack on-top of each other for mobile, right now they just squish together which is no good. Acording to someone who replied…i need to add this

Clear:both;
float:none;

But i dont know were to add that.

Thanks!