如何使用类似于iTunes相册视图的向下滑动面板创建响应式网格

Question

我想在网络上重新创建iTunes相册视图效果，它必须具有响应能力。我制作了一个动画GIF来显示所需的效果：http://files.katart.com/sgDkRGI

我已经使用flexbox启动了一个codepen，但我似乎无法让标签保持在顶部。您可以在此处查看：https://codepen.io/katartgraphics/pen/pWvNrP

这是标记：

jQuery(function($) {
    $('.tab').on('click', function() {
        $(this).siblings('.tab-content').slideUp();
        $(this).next().slideDown();
    });
});

.tabs-wrapper {
    margin: 48px auto;
    text-align: center;
}

.tab-container {
    max-width: 960px;
    margin: auto;
    padding: 0 24px;
}

.tab > span {
    display: block;
    width: 100%;
    height: 42px;
    max-width: 280px;
    margin: auto;
    padding: 0 20px;
    color: #555;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 42px;
    border: 1px solid #fff;
    border-bottom: none;
    background-color: whitesmoke;
    box-sizing: border-box;
}

.tab-content {
    display: none;
    padding-top: 1rem;
    padding-bottom: 1rem;
    text-align: left;
    background-color: tomato;
}

.tab-content > *:first-child { margin-top: 0; }
.tab-content > *:last-child { margin-bottom: 0; }

@media (min-width: 600px) {
    .tabs-wrapper {
        position: relative;
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
    }
    
    .tab {
        positiion: relative;
        top: 0;
        flex: 0 1 auto;
    }
    
    .tab-content {
        position: relative;
        top: 0;
        flex: 1 1 100%;
    }
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs-wrapper">
    
    <div class="tab"><span>Tab 1</span></div>
    <div id="tab1" class="tab-content">
        <div class="tab-container">
            <h4>Tab 1 Content</h4>
            <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
        </div>
    </div>
    
    <div class="tab"><span>Tab 2</span></div>
    <div id="tab2" class="tab-content">
        <div class="tab-container">
            <h4>Tab 2 Content</h4>
            <p>Curabitur blandit tempus porttitor. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    
    <div class="tab"><span>Tab 3</span></div>
    <div id="tab3" class="tab-content">
        <div class="tab-container">
            <h4>Tab 3 Content</h4>
            <p>Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
        </div>
    </div>
    
    <div class="tab"><span>Tab 4</span></div>
    <div id="tab4" class="tab-content">
        <div class="tab-container">
            <h4>Tab 4 Content</h4>
            <p>Nulla vitae elit libero, a pharetra augue. Etiam porta sem malesuada magna mollis euismod. Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Cras mattis consectetur purus sit amet fermentum.</p>
        </div>
    </div>
</div>

<h2>Other Content</h2>
<div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quis sapiente quod unde, dicta asperiores ipsa nam eius earum quisquam natus tempore molestias necessitatibus consequuntur id ab illum modi assumenda reprehenderit!</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed eligendi commodi facilis qui aut totam ipsam neque quod tempore omnis corrupti quaerat tenetur labore nesciunt, eum pariatur molestias velit a!</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium sequi unde iure iste aperiam ipsum officia temporibus consequuntur a pariatur aliquid, autem error, velit nam ad vitae eius deleniti cum.</div>