当从一行到另一行响应时div /类的位置

Question

所以看起来很简单但我不能为我的生活弄清楚如何在容器中订购地图和信息容器，以便它们以列形式而不是行形式，（对于移动版本）任何人都可以这里的帮助是html和css ......

<!-- content -->
<div id="container-map">

<div id="map">
    <div class="map animated bounceInRight">
</div>
<div class="info-side animated bounceInRight">
    <div id="accordion1">
    <ul>
        <li>
            <h1>Heading 1</h1>
            <div>
                <span>Phasellus eget libero elit, a sodales felis. Morbi ligula tellus, posuere nec interdum ac, blandit et ante. Morbi nibh orci, eleifend vitae venenatis non, molestie in magna. Cras scelerisque risus eget odio interdum consequat.
                </span>
            </div>
        </li>
        <li>
            <h1>Heading 2</h1>
            <div>
                <span>Phasellus eget libero elit, a sodales felis. Morbi ligula tellus, posuere nec interdum ac, blandit et ante. Morbi nibh orci, eleifend vitae venenatis non, molestie in magna. Cras scelerisque risus eget odio interdum consequat.
                </span>
            </div>
        </li>
        <li>
            <h1>Heading 3</h1>
            <div>
                <span>Phasellus eget libero elit, a sodales felis. Morbi ligula tellus, posuere nec interdum ac, blandit et ante. Morbi nibh orci, eleifend vitae venenatis non, molestie in magna. Cras scelerisque risus eget odio interdum consequat.
                </span>
            </div>
        </li>
          <li>
            <h1>Heading 3</h1>
            <div>
                <span>Phasellus eget libero elit, a sodales felis. Morbi ligula tellus, posuere nec interdum ac, blandit et ante. Morbi nibh orci, eleifend vitae venenatis non, molestie in magna. Cras scelerisque risus eget odio interdum consequat.
                </span>
            </div>
        </li>
          <li>
            <h1>Heading 3</h1>
            <div>
                <span>Phasellus eget libero elit, a sodales felis. Morbi ligula tellus, posuere nec interdum ac, blandit et ante. Morbi nibh orci, eleifend vitae venenatis non, molestie in magna. Cras scelerisque risus eget odio interdum consequat.
                </span>
            </div>
        </li>
          <li>
            <h1>Heading 3</h1>
            <div>
                <span>Phasellus eget libero elit, a sodales felis. Morbi ligula tellus, posuere nec interdum ac, blandit et ante. Morbi nibh orci, eleifend vitae venenatis non, molestie in magna. Cras scelerisque risus eget odio interdum consequat.
                </span>
            </div>
        </li>
          <li>
            <h1>Heading 3</h1>
            <div>
                <span>Phasellus eget libero elit, a sodales felis. Morbi ligula tellus, posuere nec interdum ac, blandit et ante. Morbi nibh orci, eleifend vitae venenatis non, molestie in magna. Cras scelerisque risus eget odio interdum consequat.
                </span>
            </div>
        </li>
          <li>
            <h1>Heading 3</h1>
            <div>
                <span>Phasellus eget libero elit, a sodales felis. Morbi ligula tellus, posuere nec interdum ac, blandit et ante. Morbi nibh orci, eleifend vitae venenatis non, molestie in magna. Cras scelerisque risus eget odio interdum consequat.
                </span>
            </div>
        </li>
          <li>
            <h1>Heading 3</h1>
            <div>
                <span>Phasellus eget libero elit, a sodales felis. Morbi ligula tellus, posuere nec interdum ac, blandit et ante. Morbi nibh orci, eleifend vitae venenatis non, molestie in magna. Cras scelerisque risus eget odio interdum consequat.
                </span>
            </div>
        </li>
          <li>
            <h1>Heading 3</h1>
            <div>
                <span>Phasellus eget libero elit, a sodales felis. Morbi ligula tellus, posuere nec interdum ac, blandit et ante. Morbi nibh orci, eleifend vitae venenatis non, molestie in magna. Cras scelerisque risus eget odio interdum consequat.
                </span>
            </div>
        </li>
          <li>
            <h1>Heading 3</h1>
            <div>
                <span>Phasellus eget libero elit, a sodales felis. Morbi ligula tellus, posuere nec interdum ac, blandit et ante. Morbi nibh orci, eleifend vitae venenatis non, molestie in magna. Cras scelerisque risus eget odio interdum consequat.
                </span>
            </div>
        </li>
          <li>
            <h1>Heading 3</h1>
            <div>
                <span>Phasellus eget libero elit, a sodales felis. Morbi ligula tellus, posuere nec interdum ac, blandit et ante. Morbi nibh orci, eleifend vitae venenatis non, molestie in magna. Cras scelerisque risus eget odio interdum consequat.
                </span>
            </div>
        </li>
          <li>
            <h1>Heading 3</h1>
            <div>
                <span>Phasellus eget libero elit, a sodales felis. Morbi ligula tellus, posuere nec interdum ac, blandit et ante. Morbi nibh orci, eleifend vitae venenatis non, molestie in magna. Cras scelerisque risus eget odio interdum consequat.
                </span>
            </div>
        </li>
          <li>
            <h1>Heading 3</h1>
            <div>
                <span>Phasellus eget libero elit, a sodales felis. Morbi ligula tellus, posuere nec interdum ac, blandit et ante. Morbi nibh orci, eleifend vitae venenatis non, molestie in magna. Cras scelerisque risus eget odio interdum consequat.
                </span>
            </div>
        </li>
          <li>
            <h1>Heading 3</h1>
            <div>
                <span>Phasellus eget libero elit, a sodales felis. Morbi ligula tellus, posuere nec interdum ac, blandit et ante. Morbi nibh orci, eleifend vitae venenatis non, molestie in magna. Cras scelerisque risus eget odio interdum consequat.
                </span>
            </div>
        </li>
          <li>
            <h1>Heading 3</h1>
            <div>
                <span>Phasellus eget libero elit, a sodales felis. Morbi ligula tellus, posuere nec interdum ac, blandit et ante. Morbi nibh orci, eleifend vitae venenatis non, molestie in magna. Cras scelerisque risus eget odio interdum consequat.
                </span>
            </div>
        </li>
          <li>
            <h1>Heading 3</h1>
            <div>
                <span>Phasellus eget libero elit, a sodales felis. Morbi ligula tellus, posuere nec interdum ac, blandit et ante. Morbi nibh orci, eleifend vitae venenatis non, molestie in magna. Cras scelerisque risus eget odio interdum consequat.
                </span>
            </div>
        </li>
          <li>
            <h1>Heading 3</h1>
            <div>
                <span>Phasellus eget libero elit, a sodales felis. Morbi ligula tellus, posuere nec interdum ac, blandit et ante. Morbi nibh orci, eleifend vitae venenatis non, molestie in magna. Cras scelerisque risus eget odio interdum consequat.
                </span>
            </div>
        </li>
          <li>
            <h1>Heading 3</h1>
            <div>
                <span>Phasellus eget libero elit, a sodales felis. Morbi ligula tellus, posuere nec interdum ac, blandit et ante. Morbi nibh orci, eleifend vitae venenatis non, molestie in magna. Cras scelerisque risus eget odio interdum consequat.
                </span>
            </div>
        </li>
          <li>
            <h1>Heading 3</h1>
            <div>
                <span>Phasellus eget libero elit, a sodales felis. Morbi ligula tellus, posuere nec interdum ac, blandit et ante. Morbi nibh orci, eleifend vitae venenatis non, molestie in magna. Cras scelerisque risus eget odio interdum consequat.
                </span>
            </div>
        </li>
          <li>
            <h1>Heading 3</h1>
            <div>
                <span>Phasellus eget libero elit, a sodales felis. Morbi ligula tellus, posuere nec interdum ac, blandit et ante. Morbi nibh orci, eleifend vitae venenatis non, molestie in magna. Cras scelerisque risus eget odio interdum consequat.
                </span>
            </div>
        </li>
          <li>
            <h1>Heading 3</h1>
            <div>
                <span>Phasellus eget libero elit, a sodales felis. Morbi ligula tellus, posuere nec interdum ac, blandit et ante. Morbi nibh orci, eleifend vitae venenatis non, molestie in magna. Cras scelerisque risus eget odio interdum consequat.
                </span>
            </div>
        </li>
          <li>
            <h1>Heading 3</h1>
            <div>
                <span>Phasellus eget libero elit, a sodales felis. Morbi ligula tellus, posuere nec interdum ac, blandit et ante. Morbi nibh orci, eleifend vitae venenatis non, molestie in magna. Cras scelerisque risus eget odio interdum consequat.
                </span>
            </div>
        </li>
          <li>
            <h1>Heading 3</h1>
            <div>
                <span>Phasellus eget libero elit, a sodales felis. Morbi ligula tellus, posuere nec interdum ac, blandit et ante. Morbi nibh orci, eleifend vitae venenatis non, molestie in magna. Cras scelerisque risus eget odio interdum consequat.
                </span>
            </div>
        </li>
          <li>
            <h1>Heading 3</h1>
            <div>
                <span>Phasellus eget libero elit, a sodales felis. Morbi ligula tellus, posuere nec interdum ac, blandit et ante. Morbi nibh orci, eleifend vitae venenatis non, molestie in magna. Cras scelerisque risus eget odio interdum consequat.
                </span>
            </div>
        </li>
          <li>
            <h1>Heading 3</h1>
            <div>
                <span>Phasellus eget libero elit, a sodales felis. Morbi ligula tellus, posuere nec interdum ac, blandit et ante. Morbi nibh orci, eleifend vitae venenatis non, molestie in magna. Cras scelerisque risus eget odio interdum consequat.
                </span>
            </div>
        </li>
          <li>
            <h1>Heading 3</h1>
            <div>
                <span>Phasellus eget libero elit, a sodales felis. Morbi ligula tellus, posuere nec interdum ac, blandit et ante. Morbi nibh orci, eleifend vitae venenatis non, molestie in magna. Cras scelerisque risus eget odio interdum consequat.
                </span>
            </div>
        </li>
          <li>
            <h1>Heading 3</h1>
            <div>
                <span>Phasellus eget libero elit, a sodales felis. Morbi ligula tellus, posuere nec interdum ac, blandit et ante. Morbi nibh orci, eleifend vitae venenatis non, molestie in magna. Cras scelerisque risus eget odio interdum consequat.
                </span>
            </div>
        </li>
          <li>
            <h1>Heading 3</h1>
            <div>
                <span>Phasellus eget libero elit, a sodales felis. Morbi ligula tellus, posuere nec interdum ac, blandit et ante. Morbi nibh orci, eleifend vitae venenatis non, molestie in magna. Cras scelerisque risus eget odio interdum consequat.
                </span>
            </div>
        </li>
          <li>
            <h1>Heading 30</h1>
            <div>
                <span>Phasellus eget libero elit, a sodales felis. Morbi ligula tellus, posuere nec interdum ac, blandit et ante. Morbi nibh orci, eleifend vitae venenatis non, molestie in magna. Cras scelerisque risus eget odio interdum consequat.
                </span>
            </div>
        </li>
    </ul>
</div>

</div>
</div>

</div>

和css

.map{float:left; background: url(../img/map-1309.jpg); background-size: contain; background-repeat: no-repeat; display:inline-block; height:700px;width:45%;}
.info-side{float:left; overflow-y:scroll;height:400px; margin-left:10px;}
#container-map{padding:30px 0; clear:both;top:100px; z-index:10;position:relative;width:100%;height:100%;margin-left:200px;}