Bootstrap轮播重新排序项目和内容

Question

我为媒体滑块制作了一个自举旋转木马。此滑块仅接受YouTube，Vimeo和图像链接。

以下是完整的工作（HTML / CSS / JS）示例：https://jsfiddle.net/yrkd4fs1/

这也是我的HTML代码：

<div id="popup-slider" class="carousel slide popup-slider" data-ride="carousel">
    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <div class="row">
                <div class="col-xs-12 col-sm-4">
                    <a href="https://vimeo.com/51701785">Test 1</a>
                </div>
                <div class="col-xs-12 col-sm-4">
                    <a href="https://newevolutiondesigns.com/images/freebies/cool-wallpaper-3.jpg">Test 2</a>
                </div>
                <div class="col-xs-12 col-sm-4">
                    <a href="https://www.youtube.com/watch?v=X36DOTEzjHw">Test 3</a>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="row">
                <div class="col-xs-12 col-sm-4">
                    <a href="https://www.youtube.com/watch?v=FP9xp6S5MAY">Test 4</a>
                </div>
                <div class="col-xs-12 col-sm-4">
                    <a href="https://www.youtube.com/watch?v=gGHBmi4rfCk">Test 5</a>
                </div>
                <div class="col-xs-12 col-sm-4">
                    <a href="https://www.youtube.com/watch?v=ComE3Ozdjm4">Test 6</a>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="row">
                <div class="col-xs-12 col-sm-4">
                    <a href="https://www.youtube.com/watch?v=n9Onsk7IBjo">Test 7</a>
                </div>
                <div class="col-xs-12 col-sm-4">
                    <a href="https://www.youtube.com/watch?v=_Vqbr__8dOE">Test 8</a>
                </div>
                <div class="col-xs-12 col-sm-4">
                    <a href="https://www.youtube.com/watch?v=JwkcGVDlSAM">Test 9</a>
                </div>
            </div>
        </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#popup-slider" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#popup-slider" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

我的问题始于移动设备。我需要以某种方式在移动设备上显示每个幻灯片只有一个视频或低于520px的屏幕，我在这里堆叠。

怎么做？