Jquery Bootstrap 3转盘用于移动和普通网格用于web

有人能帮我吗？我怎样才能做到这一点。我想在桌面版本中显示2行，每行3个网格，如果我在移动设备中打开它，而不是在另一行下面显示一行，则显示相同的页面，我想为它提供引导旋转效果。我已经附上了移动和网络的png文件。

创建一个

carousel

，如下所示。将桌面视图中的每个

列添加到旋转木马的
项中

//hide it in desktop view and tablet view and show it in mobile view
<div id="myCarousel" class="carousel slide hidden-md hidden-sm col-xs-12" data-ride="carousel">

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active"> //put all your row items in each `item` here
          Item One
    </div>

    <div class="item">
      Item One
    </div>

    <div class="item">
      Item Two
    </div>


  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">

    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>


出于演示目的，我使用了
$（window.width（）
来演示它的工作原理，因为您无法在
浏览器中测试它是否是移动的

注意-我也对您的
html
做了一些更改！请注意

像这样的？谢谢古鲁帕萨德的回答。我现在也在做同样的事情。但是我在想，如果不重复代码，有什么方法可以达到同样的效果。你可以使用
jquery
来实现这一点！识别用户是否正在
document.ready上的手机中浏览。如果是，则获取每个
项目
并创建一个引导
旋转木马
结构，并将每个项目包装在旋转木马的
项目
中！！如果您使用当前的
html
代码创建
演示
，我可以帮助您！！不，不！！我问你现在有什么html结构！！你在有问题的图片中展示的那个@钱德里卡德赛更新答案！！检查并让我知道！！好啊看到这个并尝试调整它的大小！！你会发现变化
<div class="container col-md-12 hidden-xs"> //Parent to be hidden in mobile
    <div class="row">
        <div class="col-md-4">
            Item One
        </div>
        <div class="col-md-4">
            Item Two
        </div>
        <div class="col-md-4">
            Item Three
        </div>
    </div>
</div>

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    var itemsToWrap=$('.testItem');
    $('.parentTest').remove();
    var carousel='<div id="myCarousel" class="carousel slide hidden-md hidden-sm col-xs-12" data-ride="carousel"><div class="carousel-inner" role="listbox"></div>  <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>    <span class="sr-only">Next</span>  </a></div>';
    $(carousel).appendTo('.baseParent');
    var elementTowrap="";
    $.each($(itemsToWrap),function(index){
        var html=$(this).html();
        console.log(html);
        if(index==0)
            elementTowrap+='<div class="item active">'+$(this).html()+'</div>';
        else
            elementTowrap+='<div class="item">'+$(this).html()+'</div>';
    });
    $('.carousel-inner').append($(elementTowrap));
    $("#myCarousel").carousel("pause").removeData();
    $("#myCarousel").carousel();
}