屏幕移动设备左侧的弹出窗口

Question

下面的代码在桌面上运行正常，但我的问题是在按钮靠近屏幕右侧的移动设备上，弹出窗口显示在按钮下方，但您需要向右滚动才能看到它。

我无法弄清楚如何在移动设备上将弹出窗口移到左侧

$('#btnMetal').on("click",
        function() {
            $("#metalList").css({
                'position': 'absolute',
                'z-index': '99',
                'left': $(this).offset().left,
                'top': $(this).offset().top + $(this).height() + 5
            }).slideToggle().delay(1000);
        });

有谁知道如何实现这个目标

---------- HTML按钮

<div class="col-md-6 col-12">
                <span class="item-types">
                    <button id="btnStyle">Style <i class="icon ion-ios-arrow-down"></i></button>
                </span>
                <span class="item-types">
                    <button id="btnMetal">Metal <i class="icon ion-ios-arrow-down"></i></button>
                </span>
                <span class="item-types">
                    <button id="btnSort">Sort <i class="icon ion-ios-arrow-down"></i></button>
                </span>
        </div>

DIV

<div id="metalList">
    <div>
        <label class="checkbox">
            <input type="checkbox" name="HighLow" class="chkSort" id="hl" value="hl">Cost High - Low
            <i class="helper"></i>
        </label>

    </div>
</div>

CSS

#styleList, #diamondList, #metalList, #sortorder {
    position: relative;
    left: 10px;
    border: 1px solid gray;
    padding: 5px;
    background-color: white;
    max-width: 270px;
}