モバイル対応の非表示のdivを表示

Question

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

このコードの下のモバイル版のボタンを作成します。このボタンをクリックすると他の2列が表示されます。これはどのように可能ですBootstrap/JavaScript **作成ボタンは私の問題ではありません。

Answer 1

これは可能です。

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

Answer 2

あなたは.. .. これを行うコラム1にIDを追加し、2をCOLするjQueryの（）あなたが追加することができますクラスを使用し、COL3と同じ行でそれらを表示することができ

<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'); 
    }); 

これが役立つことを願っています