how to collapse a set of checkboxes into dropdown menu

I have a set of checkboxes in the middle of my page (not in navbar). I want to show them until screen size 991px and by media query I want to turn them into a dropdown link.

`<div class="widget controller_widget">
<fieldset>
<legend>Table Controllers: </legend>
<div class="table_controllers_div">
<div class="form-check-inline row top_gap">
<label class="checkbox_container form-check-label" id="priceless_color_label" 

for="priceless_color">Priceless Items Color<input class="form-check-input" type="checkbox" id="priceless_color"/><span class="checkbox_span"></span></label>
    </div>
 <br>
<div class="form-check-inline row top_gap">
<label class="checkbox_container form-check-label" id="priceless_checkbox_label" for="priceless_checkbox"><span class="label_text">Disable Priceless</span><input class="form-check-input" checked type="checkbox" id="priceless_checkbox"/><span class="checkbox_span"></span></label>
</div>
<br>
<div class="form-check-inline row top_gap">
<label class="checkbox_container form-check-label" id="clear_checks_label" for="clear_checks"><span class="label_text">Clear All Ticks</span><input class="form-check-input" checked type="checkbox" id="clear_checks"/><span class="checkbox_span"></span></label>
</div>
<br>
<div class="form-check-inline row top_gap">
<label class="checkbox_container form-check-label" id="first_company_label" for="first_company_check"><span class="label_text">Check First Companies</span><input class="form-check-input" type="checkbox" id="first_company_check"/><span class="checkbox_span"></span></label>
</div>
<br>
<div class="form-check-inline row top_gap">
<label class="checkbox_container form-check-label" id="show_changes_label" for="show_changes">Show Changes<input class="form-check-input" type="checkbox" id="show_changes"/><span class="checkbox_span"></span></label>
</div>
</div>
</fieldset>
</div>`

it looks like this until screen size 991 px: But with the code below I can show it as dropdown like this:

`<div  id="controllers row">
<button id="controller_btn"  style="margin-left:-10px;padding-left:0;"  data-toggle="dropdown" class="dropdown-toggle btn btn_success">C</button>
<div class="dropdown-menu" aria-labelledby="table_controllers">
<div class="form-check-inline row top_gap dropdown-item">
<label class="checkbox_container form-check-label" id="priceless_color_label" for="priceless_color">Priceless Items Color<input class="form-check-input" type="checkbox" id="priceless_color"/><span class="checkbox_span"></span></label>
</div>
<div class="dropdown-divider"></div>
<div class="form-check-inline row top_gap dropdown-item">
<label class="checkbox_container form-check-label" id="priceless_checkbox_label" for="priceless_checkbox"><span class="label_text">Disable Priceless</span><input class="form-check-input" checked type="checkbox" id="priceless_checkbox"/><span class="checkbox_span"></span></label>
</div>
<div class="dropdown-divider"></div>
<div class="form-check-inline row top_gap dropdown-item">
<label class="checkbox_container form-check-label" id="clear_checks_label" for="clear_checks"><span class="label_text">Clear All Ticks</span><input class="form-check-input" checked type="checkbox" id="clear_checks"/><span class="checkbox_span"></span></label>
 </div>
<div class="dropdown-divider"></div>
 <div class="form-check-inline row top_gap dropdown-item">
<label class="checkbox_container form-check-label" id="first_company_label" for="first_company_check"><span class="label_text">Check First Companies</span><input class="form-check-input" type="checkbox" id="first_company_check"/><span class="checkbox_span"></span></label>
</div>
<div class="dropdown-divider"></div>
<div class="form-check-inline row top_gap dropdown-item">
<label class="checkbox_container form-check-label" id="show_changes_label" for="show_changes">Show Changes<input class="form-check-input" type="checkbox" id="show_changes"/><span class="checkbox_span"></span></label>
</div>
</div>
</div>`

with this code it looks like this: enter image description here But I want to change from first position into second by media query. not static way. Because if it is static and one of them is hidden (display:none) in html, then checkbox control functions are confused.