How to make Carousel in mobile mode appear only 1 column

Question

For example I have the following code:

<div class="col-md-12 text-center"><h3>Bootstrap 3 Multiple Slide Carousel DESKTOP</h3></div>
        <div class="col-md-6 col-md-offset-3">
        <div class="carousel slide" id="myCarouselDesktop">
          <div class="carousel-inner">
            <div class="item active">
              <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e499e4/fff&amp;text=1" class="img-responsive"></a></div>
            </div>
            <div class="item">
              <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e477e4/fff&amp;text=2" class="img-responsive"></a></div>
            </div>
            <div class="item">
              <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/eeeeee&amp;text=3" class="img-responsive"></a></div>
            </div>
            <div class="item">
              <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/f4f4f4&amp;text=4" class="img-responsive"></a></div>
            </div>
            <div class="item">
              <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/f566f5/333&amp;text=5" class="img-responsive"></a></div>
            </div>

          </div>
          <a class="left carousel-control" href="#myCarouselDesktop" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
          <a class="right carousel-control" href="#myCarouselDesktop" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
        </div>
        </div>

Now mobile mode:

Bootstrap 3 Multiple Slide Carousel Mobile

<div class="col-md-12 col-md-offset-3">
<div class="carousel slide" id="myCarouselMobile">
  <div class="carousel-inner">
    <div class="item active">
      <div class="col-lg-12"><a href="#"><img src="http://placehold.it/500/e499e4/fff&amp;text=1" class="img-responsive"></a></div>
    </div>
    <div class="item">
        <div class="col-lg-12"><a href="#"><img src="http://placehold.it/500/e477e4/fff&amp;text=2" class="img-responsive"></a></div>
    </div>
    <div class="item">
        <div class="col-lg-12"><a href="#"><img src="http://placehold.it/500/eeeeee&amp;text=3" class="img-responsive"></a></div>
    </div>
    <div class="item">
        <div class="col-lg-12"><a href="#"><img src="http://placehold.it/500/f4f4f4&amp;text=4" class="img-responsive"></a></div>
    </div>
    <div class="item">
        <div class="col-lg-12"><a href="#"><img src="http://placehold.it/500/f566f5/333&amp;text=5" class="img-responsive"></a></div>
    </div>

  </div>
  <a class="left carousel-control" href="#myCarouselMobile" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
  <a class="right carousel-control" href="#myCarouselMobile" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>

CSS code :

/****  MOBILE when the viewport is > 730***/
@media only screen and (min-width: 730px) {
    #myCarouselDesktop {
            display: block;
            text-align: center;
    }
        #myCarouselMobile {
            display: none;

        }
}

/****  DESKTOP when the viewport is < 730px ***/
@media only screen and ( max-width:730px) {
        #myCarouselDesktop {
                display: none;

            }
        #myCarouselMobile {
            display: block;
            text-align: center;
        }

}

Javascript code:

$('#myCarouselDesktop').carousel({
      interval: 4000
    })

    $('.carousel .item').each(function(){
      var next = $(this).next();
      if (!next.length) {
        next = $(this).siblings(':first');
      }
      next.children(':first-child').clone().appendTo($(this));

      for (var i=0;i<2;i++) {
        next=next.next();
        if (!next.length) {
            next = $(this).siblings(':first');
        }

        next.children(':first-child').clone().appendTo($(this));
      }
    });