ラジオボタングループを折りたたみ可能にするにはどうすればいいですか？

Question

私はメニュー・バーを持っています。メニュー・バーは、ブートストラップを使用してボタンとして設計したラジオ・ボタン（ボタン・グループ内）で構成されています。今、私はそれを反応的にして、ウィンドウが十分に狭いときにドロップダウンボタンに倒れるようにしたいと思います。ブートストラップのドキュメントで何も見つかりませんでしたので、これをどのように達成するのか分かりません。何か提案がありがたいです。

<div class="row col-md-12"> 
    <div style="clear: both; display: inline;"> 
     <div class="btn-group" data-toggle="buttons"> 
      <label class="btn btn-info btn-sm active" style="width: 300px;"><input type="radio" value="0" class="check" name="options" id="option1" autocomplete="off" checked>1</label> 
      <label class="btn btn-info btn-sm" style="width: 300px;"><input type="radio" value="1" class="check" name="options" id="option2" autocomplete="off">2</label> 
      <label class="btn btn-info btn-sm" style="width: 300px;"><input type="radio" value="2" class="check" name="options" id="option3" autocomplete="off">3</label> 
     </div> 
    </div> 
</div> 

Answer 1

<div class="row col-md-12"> 
    <div style="clear: both; display: inline;"> 
     <div class="btn-group" data-toggle="collapse"> 
      <div class="dropdown-button-container"> 
       <label class="btn btn-info btn-sm active" style="width: 300px;"><input autocomplete="off" checked class="check" id="option1" name="options" type="radio" value="0">1</label> <label class="btn btn-info btn-sm" style="width: 300px;"><input autocomplete="off" class="check" id="option2" name="options" type="radio" value="1">2</label> <label class="btn btn-info btn-sm" style="width: 300px;"><input autocomplete="off" class="check" id="option3" name="options" type="radio" value="2">3</label> 
      </div> 
     </div> 
    </div> 
</div> 

Javascriptを

$(window).on("load, resize", function() { 
    var viewportWidth = $(window).width(); 
    if (viewportWidth < 768) { 
     $(".dropdown-button-container").addClass("collapse"); 
    } else { 
     $(".dropdown-button-container").removeClass("collapse"); 
}); 

私が提供情報を取得することができ、約などの特定です：

は、これは私のコードです。