Plippers on "[Plugin: Contact Form 7] Making a two column form responsive??"

Hello! I'm trying to create a two column Contact 7 form that is also responsive. I've got as far as the two column form, but can't seem to make it responsive. The two columns just smush together on a mobile, and instead I'd like the "Subject" and "Message" fields (in the right column) to drop below the left column fields. My test website is http://bit.ly/10F4zfy and I've outlined the code I'm trying below.

Below is the code I used to create the 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 -->

Below is the CSS code I used:

#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%;
}

I also tried this media screen code in the CSS - it worked to make my submit button nice and big on a mobile, but the columns stayed squashed side by side.

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

  .wpcf7-form-control {
    width: 95% !important;
  }

  .wpcf7-form-control.wpcf7-submit {
    font-size: 18px;
    font-size: 1.286rem;
    padding: 14px 0;
    padding:  1rem 0;
  }
}

Is what I'm trying to do with a two column form even possible? If so, any help with the coding would be super greatly appreciated!

Cheers!
Ania

http://wordpress.org/extend/plugins/contact-form-7/