Multiple loops on same category with different design

In the first loop you display posts from the social category, so you should put it at the end of code. And you query for only one post from that category: 'posts_per_page' => 1.

<?php 
//
// display first post
while( have_posts() )
{
    the_post();

    ?>
    <article class="">

    </article>
    <?php 
    // exit from loop after first posts (count from 0)
    if ( $wp_query->current_post >= 0 )
        break;
}

?>
<div class="spacer-xs"></div>
    <ul class="list-space-xs list-seperated list-square-bullet-exclude-first list-unstyled">
    <?php

    //
    // display second post
    while( have_posts() )
    { 
        the_post();
        ?>
        <li>
            <article class="post--horizontal post--horizontal-xs cat-2">

            </article>
        </li>
        <?php 

        // exit from loop after second posts
        if ( $wp_query->current_post >= 1 )
            break;
    }

    //
    // display posts from "category=social"
    $args=array(
        'posts_per_page' => 3, // <-- 
        'category_name' => 'social'
    );
    $my_query = new WP_Query($args);
    while ($my_query->have_posts()) : $my_query->the_post();
    ?>
        <li>
            <article class="cat-4">
            </article>
        </li>
    <?php endwhile; ?>


    ?>
    </ul>
</div>
<?php