Css 如何将bootstrap 4卡头上的按钮始终移动到正确位置（响应和桌面）？

我有以下代码用于引导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

---

您可以找到很多方法来解决这个问题。我增加了两个例子

“结构”：一个flex包装（橙色边框）和两个Col（红色边框）

A.在两个文件之间证明内容的合理性 顺便

特色非常长的文本
一些基于卡片标题的快速示例文本，构成了卡片内容的大部分