Switch two sections to one using a media query

I am using the jQuery multiscroll.js plugin ( https://github.com/alvarotrigo/multiscroll.js ).
It works great. However, at a certain browser width, it breaks. So I would like it to be "disabled" and just show one side of each section after a certain browser width.

Like this page for example :
http://www.reverzo.tymberry.com/

Here is a fiddle : http://jsfiddle.net/929u1za0/

My pathetic attempt:
HTML

<div id="myContainer">

    <div class="ms-left">
        <!-- Section 1 left -->
        <div class="ms-section section1 ms-table active" data-anchor="first" style="height: 100%; background-color: rgb(255, 255, 255);">
            <div class="ms-section-content">
                <h1>Section 1 left</h1>
            </div><!-- /.ms-section-content -->
        </div><!-- /.ms-section -->

        <!-- Section 2 left -->
        <div class="ms-section section2 ms-table" data-anchor="second" style="height: 100%; background-color: rgb(255, 255, 255);">
        <div class="ms-section-content">
            <h1>Section 2 left</h1>
        </div><!-- /.ms-section-content -->
      </div><!-- /.ms-section -->
    </div><!-- /.ms-left -->

    <div class="ms-right">
        <!-- Section 1 right -->
        <div class="ms-section section1 ms-table active" data-anchor="first" style="height: 100%; background-color: rgb(255, 255, 255);">
        <div class="ms-section-content">
            <div class="ms-section-content">
                <h1>Section 1 right</h1>
            </div><!-- /.ms-section-content -->
        </div><!-- /.ms-section -->

        <!-- Section 2 right -->
        <div class="ms-section section2 ms-table" data-anchor="second" style="height: 100%; background-color: rgb(255, 255, 255);">
           <div class="ms-section-content">
                <h1>Section 2 right</h1>
            </div><!-- /.ms-section-content -->
        </div><!-- /.ms-section -->
    </div><!-- /.ms-right -->   
</div><!-- #myContainer -->

      

        
        
        
      

    

CSS

/**
 * multiscroll 0.0.6 Beta
 * https://github.com/alvarotrigo/multiscroll.js
 * MIT licensed
 *
 * Copyright (C) 2013 alvarotrigo.com - A project by Alvaro Trigo
 */
.ms-section {
    position: relative;
    @include box-sizing(border-box);
}

.ms-section.ms-table{
    display: table;
    width: 100%;
}

.ms-tableCell {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}

.ms-easing {
    @include transition(all 0.7s ease-out);
}

/* Custom styles */
.ms-section {
    text-align: center;
}

/* The media query */
@media screen and (max-width: 700px) {
    .ms-section section2 {
        display: none;
    }
}

      

        
        
        
      

    

I am grateful for any help! Thank!

UPDATE : Why doesn't it work to just show left section1 and right section 2?

       @media screen and (max-width: 700px) {
            .ms-left .section1, 
            .ms-right .section2 {
                width: 100% !important;   
            }
        }