flex order property not working in Safari

Question

I am using Bootstrap 4 for the css framework and I use the order-lg-2 class which looks like that :

.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>

when testing on Chrome I get the desire result which is the text align to left of the image , while testing on Safari show its just being ignored and the image is shown below the text, like regular display:block I tried to add -webkit-order: 2; to css but it aint worked.