グリッド（ブートストラップとjQuery）を使用してアイテムにコンテンツを追加する方法は？

Question

htmlの&のCSSレイアウトを作成して、行内に項目が含まれていて、クリックされた各項目がより多くのコンテンツを読み込むようにしたいと考えています。この画面のような何か：

グリッドデスクトップビュー：

それは持っていたようでないモバイルビュー、もし私には非常に簡単だろう異なるHTML要素が注文：

モバイルビュー：今のところ

私はこのhtmlコード（USIを作成しましたブートストラップCSS）：

<div class="container"> 
    <div class="row"> 

     <div class="col-md-4 item"> 
      <a class="link" href="#emp_more_4" data-id="4">  
      </a> 
     </div> 

     <div class="col-md-12 emp_info" id="emp_more_4" style="display: none;"> 
      <div class="emp_info_con"> 
      </div> 
     </div> 

     <div class="col-md-4 module"> 
      <a class="link" href="#emp_more_3" data-id="3">  
      </a> 
     </div> 

     <div class="col-md-12 emp_info" id="emp_more_3" style="display: none;"> 
      <div class="emp_info_con"> 
      </div> 
     </div> 

     <div class="col-md-4 module"> 
      <a class="link" href="#emp_more_2" data-id="2">  
      </a> 
     </div> 

     <div class="col-md-12 emp_info" id="emp_more_2" style="display: none;"> 
      <div class="emp_info_con"> 
      </div> 
     </div> 

    </div> 

    <div class="row"> 

     <div class="col-md-4 module"> 
      <a class="link" href="#emp_more_1" data-id="1">  
      </a> 
     </div> 

     <div class="col-md-12 emp_info" id="emp_more_1" style="display: none;"> 
      <div class="emp_info_con"> 
      </div> 
     </div> 
    </div> 
</div> 

各「emp_info」要素は、より多くの項目の内容を持つ要素です。

とjQueryコードは：

 jQuery('.employees a').click(function() { 
      var id = jQuery(this).data("id"); 
      jQuery('.employees .emp_info').hide(); 
      jQuery('.employees #emp_more_'+id).show(); 
     }); 

これは、各項目に、より多くのコンテンツをロードしますが、それは列と行のレイアウトを破ります。 デスクトップビューとモバイルビューの両方でグリッドレイアウトを維持する方法はありますか？ 誰かが良いアイデアを持っているなら、私はBootstrapクラスなしでそれをスタイルするために開いています。あなたを助けることができるHERESに解決

Answer 1

：

$(document).on('click', '.item a', function() { 
 
\t $(".emp_info").width($('.row').width() - 30); 
 
    $('.item').attr('style', ''); 
 
    $(this).closest('.item').css('margin-bottom', $(this).next().height()); 
 
    $('.emp_info').not($(this).next()).slideUp(); 
 
    $(this).next().slideToggle(function(){ 
 
    \t \t if($(this).is(':hidden')){ 
 
      $('.item').attr('style', ''); 
 
     } 
 
    }); 
 
}); 
 
$(window).on('resize', function(){ 
 
    $(".emp_info").width($('.row').width() - 30); 
 
});

.item a { 
 
    height: 50px; 
 
    background: #000; 
 
    margin-bottom: 5px; 
 
    display: block; 
 
} 
 

 
.item:nth-child(2) .emp_info { 
 
    background-color: #ff0; 
 
} 
 

 
.item:nth-child(3) .emp_info { 
 
    background-color: #eee; 
 
} 
 

 
.emp_info { 
 
    background-color: #f00; 
 
    margin-bottom: 10px; 
 
    height: 50px; 
 
    display: none; 
 
    position: absolute; 
 
    left: 15px; 
 
} 
 

 
.row { 
 
    position: relative; 
 
} 
 

 
.col-lg-1, 
 
.col-lg-10, 
 
.col-lg-11, 
 
.col-lg-12, 
 
.col-lg-2, 
 
.col-lg-3, 
 
.col-lg-4, 
 
.col-lg-5, 
 
.col-lg-6, 
 
.col-lg-7, 
 
.col-lg-8, 
 
.col-lg-9, 
 
.col-md-1, 
 
.col-md-10, 
 
.col-md-11, 
 
.col-md-12, 
 
.col-md-2, 
 
.col-md-3, 
 
.col-md-4, 
 
.col-md-5, 
 
.col-md-6, 
 
.col-md-7, 
 
.col-md-8, 
 
.col-md-9, 
 
.col-sm-1, 
 
.col-sm-10, 
 
.col-sm-11, 
 
.col-sm-12, 
 
.col-sm-2, 
 
.col-sm-3, 
 
.col-sm-4, 
 
.col-sm-5, 
 
.col-sm-6, 
 
.col-sm-7, 
 
.col-sm-8, 
 
.col-sm-9, 
 
.col-xs-1, 
 
.col-xs-10, 
 
.col-xs-11, 
 
.col-xs-12, 
 
.col-xs-2, 
 
.col-xs-3, 
 
.col-xs-4, 
 
.col-xs-5, 
 
.col-xs-6, 
 
.col-xs-7, 
 
.col-xs-8, 
 
.col-xs-9 { 
 
    position: static; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 

 
    <div class="col-sm-4 item"> 
 
     <a class="link" href="#emp_more_4" data-id="1"> 
 
     </a> 
 
     <div class="emp_info"> 
 
     <div class="emp_info_con"> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-sm-4 item"> 
 
     <a class="link" href="#emp_more_4" data-id="2"> 
 
     </a> 
 
     <div class="emp_info"> 
 
     <div class="emp_info_con"> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-sm-4 item"> 
 
     <a class="link" href="#emp_more_4" data-id="3"> 
 
     </a> 
 
     <div class="emp_info"> 
 
     <div class="emp_info_con"> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 

 
    </div> 
 

 
    <div class="row"> 
 

 
    <div class="col-sm-4 item"> 
 
     <a class="link" href="#" data-id="4"> 
 
     </a> 
 
     <div class="emp_info"> 
 
     <div class="emp_info_con"> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-sm-4 item"> 
 
     <a class="link" href="#" data-id="5"> 
 
     </a> 
 
     <div class="emp_info"> 
 
     <div class="emp_info_con"> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>