使用媒体查询将两个部分变成一个

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

我很感激任何帮助！谢谢！！

UPDATE： 为什么不能正常显示左侧部分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/