Bootstrap carousel reordering items and content

Question

I made an bootstrap carousel for media slider. This slider accept only YouTube, Vimeo and Image links.

Here is full working (HTML/CSS/JS) example: https://jsfiddle.net/yrkd4fs1/

And here is also my HTML code:

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

My problem begin on mobile devices. I need somehow display only one video per slide on mobile devices or screens lower then 520px and I stack here.

How to do that?