如何将引导程序4卡头上的按钮始终保持正确（响应式和桌面式？）>

Question

我在引导4卡头上具有以下刷新按钮的代码

<div class="animated fadeIn">
    <div class="row">
        <div class="col-lg-12">
          <div class="card">
            <div class="card-header">              
              <div class="row">
                <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">                   
                    <button type="button" class="btn btn-success mr-1" data-toggle="modal" (click)="refresh()">
                      <i class="fa fa-align-justify"></i>
                      </button>
                </div>
              </div>    
            </div>
            <div class="card-body">

                <!-- other markup -->
            </div>
        </div> <!-- ./ card -->
        </div> <!-- ./ col-lg-12 -->
    </div> <!-- ./ row -->
</div> <!-- ./ animated fadeIn --> 
但是此按钮在桌面以及移动模式下仍保留在左侧，但是我如何使此按钮在桌面模式以及移动模式下始终保留在右侧，这应支持chrome，firefox和edge] >

我在引导4卡标题上具有以下刷新按钮的代码

[[[[[[[[[[

Answer 1

“结构”：