Javascript 显示隐藏移动响应div

我有一行有3列

|   1   |   2   |    3    |

我想在大屏幕和中屏幕上显示所有列。但在手机屏幕上，我只想显示第一列。这项工作我已经做了这个代码

<div class="row">
        <div class="col-md-4 col-lg-4">
                <asp:Label ID="lblCatagory1" runat="server" Text=""></asp:Label>
        </div>

        <div class="col-md-4 col-lg-4 hidden-sm hidden-xs" id="cat2">
                <asp:Label ID="lblCatagory2" runat="server" Text=""></asp:Label>
        </div>

        <div class="col-md-4 col-lg-4 hidden-sm hidden-xs" id="cat3">
                <asp:Label ID="lblCatagory3" runat="server" Text=""></asp:Label>
        </div>
</div>

现在我想在下面的代码中创建一个移动版本的按钮。单击此按钮，将显示其他两列。在

Bootstrap/JavaScript

**创建按钮不是我的问题。

您可以这样做

$('button').on('click', function(){
  $('#cat2, #cat#3').toggleClass('hidden-sm').toggleClass('hidden-xs')
})

你可以这样做。。 将id添加到第1列，然后使用jquery（）可以将类添加到第2列和第3列，并将它们显示在同一行中

<script type="text/javascript">
    $('#button1').click(function () {
        $('#cat2, #cat3').toggleClass('hidden-sm').toggleClass('hidden-xs');
        $('#cat1, #cat2, #cat3').addClass('col-sm-4 col-xs-4').addClass('col-sm-4 col-xs-4').addClass('col-sm-4 col-xs-4');
    }); 

$（'#按钮1'）。单击（函数（）{
$（'cat2，'cat3'）.toggleClass（'hidden-sm'）.toggleClass（'hidden-xs'）；
$（'#cat1，#cat2，#cat3'）.addClass（'col-sm-4 col-xs-4'）.addClass（'col-sm-4 col-xs-4'）.addClass（'col-sm-4 col-xs-4'）.addClass（'col-sm-4 col-xs-4'）；
}); 

---

希望这有帮助

可能是打字错误。。它应该是第三类而不是第三类#