弹性订单属性在Safari中不起作用

Question

我将Bootstrap 4用于CSS框架，并使用order-lg-2类，它看起来像这样：

.order-lg-2 {
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 2;
  order: 2;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<section>
  <div className="container">
    <div className="row align-items-center">
      <div className="col-lg-6 order-lg-2">
        <div className="p-5">
          <img className="img-fluid" src="https://images.pexels.com/photos/450279/pexels-photo-450279.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt />
        </div>
      </div>
      <div className="col-lg-6 order-lg-1">
        <div className="p-5">
          <h2 className="display-4">Lorem Insup...</h2>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum eleifend enim et tempor. In quis feugiat purus, vitae vehicula metus. Etiam rhoncus quis tortor vitae porta. Nunc a varius mauris. Sed lectus libero, interdum non tellus a, efficitur
            elementum odio. Sed cursus augue ut diam rutrum scelerisque. Ut sed turpis hendrerit, aliquet dui eu, tempor risus.
          </p>
        </div>
      </div>
    </div>
  </div>
</section>

在Chrome上进行测试时，我得到了期望的结果，即文本与图像的左侧对齐，而在Safari上进行测试时，它只是被忽略了，并且图像显示在文本下方，就像我尝试过的常规display:block将-webkit-order: 2;添加到CSS中，但效果不佳。