Create two column form layout at breakpoint using Susy 2

Question

I have a basic contact form that I'd like to have stacked at smaller screen sizes, with a two-column layout at larger sizes.

My first three labels and inputs should go into the first column while my textarea and accompanying label should go into the second column. The submit should be below the textarea as well.

But for some reason, my email field is appearing above the textarea despite what I believe the CSS should dictate.

Here's my HTML:

    <form method="post" class="uniForm">

    <div id="div_id_name" class="ctrlHolder">

            <label for="id_name" class="requiredField">
                Your name<span class="asteriskField">*</span>
            </label>

            <input class="textinput textInput" id="id_name" maxlength="100" name="name" type="text" />

    </div>

    <div id="div_id_email" class="ctrlHolder">

            <label for="id_email" class="requiredField">
                Your email address<span class="asteriskField">*</span>
            </label>

            <input class="emailinput" id="id_email" maxlength="200" name="email" type="email" />

    </div>

    <div id="div_id_phone" class="ctrlHolder">

            <label for="id_phone" >
                Phone number
            </label>

            <input type="tel" name="phone" placeholder="555-555-5555" class="phonenumberinput" id="id_phone">

    </div>

    <div id="div_id_body" class="ctrlHolder">

            <label for="id_body" class="requiredField">
                Your message<span class="asteriskField">*</span>
            </label>

            <textarea class="textarea" cols="40" id="id_body" name="body" rows="10">
</textarea>

    </div>

        <input type="submit" value="&#x25b6; Submit">
    </form>

And here's my SCSS:

$susy: (
    columns: 1,
    gutters: 1/8,
    gutter-position: inside,
    //global-box-sizing: border-box,
    debug: (
        image: hide,
        color: rgba(#66f, .25),
        output: background,
        toggle: top right,
    ),
);

$desktop: layout(auto 2 1/8 inside);

$md_desktop: 970px;

section#contact {
    @include span(1);
    margin-bottom: 25px;

    h2 {
        font-family: $oswald_font;
        text-transform: uppercase;
        color: $red;
        font-size: 28px;
        font-weight: 400;
        margin-bottom: 25px;
        letter-spacing: 2px;
    }

    p {
        font-family: $oswald_font;
        font-weight: 300;
        font-size: 16px;
        line-height: 1.7em;
        margin-bottom: 15px;
    }

    form {
        margin-top: 25px;
        margin-bottom: 25px;

        @include breakpoint($md_desktop) {
            @include layout($desktop);
            @include container(show);
        }

        label {
            text-transform: uppercase;
            font-family: $oswald_font;
            font-weight: 400;
            display: block;
            margin: 10px 0;
            font-size: 14px;
            letter-spacing: 1px;
        }

        input {
            height: 25px;
        }

        input, textarea {
            display: block;
            width: 100%;
            background-color: $blue;
            border: 1px solid #DDD;
            color: white;

            &:focus {
                border: 1px solid rgba(247,220,112,1);
                box-shadow: 0 0 5px rgba(247,220,112,1);
                outline: none;
            }
        }

        #div_id_name, #div_id_email, #div_id_phone  {

            @include breakpoint($md_desktop) {
                @include span(1 of 2);
            }
        }

        #div_id_body {

            @include breakpoint($md_desktop) {
                @include span(1 of 2 at 2);
            }
        }

        input[type="submit"] {
            @include clearfix;
            font-family: $oswald_font;
            cursor: pointer;
            letter-spacing: 4px;
            float: right;
            width: 50%;
            background-color: red;
            border: none;
            color: white;
            text-transform: uppercase;
            font-size: 16px;
            padding: 0;
            margin-top: 25px;

            &:hover {
                background-color: darken($red, 5%);
            }

            @include breakpoint($md_desktop) {
                @include span(1 of 2 at 2);
            }
        }
    }
}

Answer 1

Susy is simply using CSS floats for something like this, so can't do anything that floats can't do. When you have three items in a row, floated left at 50%, they are going to stack next to each other first. You can fix that by adding a clear of left or both to make sure they stack vertically, but then you can't float the final field. I would probably do something like this (inside your breakpoint):

.name,
.email,
.phone {
  @include span(1 of 2);
  @include break;
}

.message {
  @include push(1 of 2);
}

I didn't use your exact classes there, trying to make it easy to read. Hopefully that makes sense. break is a Susy mixin that applies clear: both; . This floats and stacks the first three fields to the left. Since non-floated elements flow around floated ones, the final field automatically moves up top — you just want to push it right, so it doesn't try to overlap.