使用媒体查询将两个部分合二为一

Question

我正在使用 multiscroll.js jquery 插件 (https://github.com/alvarotrigo/multiscroll.js)。
它工作得很好。但是，在一定的浏览器宽度下，它会崩溃。所以我希望它被“禁用”，并且只在一定的浏览器宽度后显示每个部分的一侧。

喜欢此页面上的示例：
http://www.reverzo.tymberry.com/

这是小提琴：http://jsfiddle.net/929u1za0/

我可怜的尝试：
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;
    }
}

感谢您的任何帮助！谢谢！！

更新： 为什么只显示左侧部分 1 和右侧部分 2 不起作用？

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

Answer 1

您必须将媒体查询更新为：

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

小提琴：http://jsfiddle.net/929u1za0/1/