JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-10 order-2">
      <h2>Alignment by Order</h2>
      <p> Alignment helps organize and order the content, controlling how the eye flows from one
        component to the next. It is the organization and creation of invisible lines. Without
        alignment, users will have a hard time recognizing how elements relate to eachother, and
        your page will look messy and disorganized.</p>
    </div>
    <div class="col-sm-2 order-1">
      <img src="https://picsum.photos/150/100" alt="" class="img-fluid w-100" />
    </div>
  </div>
  <div class="row flex-column-reverse flex-sm-row-reverse">
    <div class="col-sm-10">
      <h2>Alignment by flex</h2>
      <p>Alignment helps organize and order the content, controlling how the eye flows from one component to the next. It is the organization and creation of invisible lines. Without alignment, users will have a hard time recognizing how elements relate to eachother, and your page will look messy and disorganized.</p>
    </div>
    <div class="col-sm-2">
      <img src="https://picsum.photos/150/100" alt="" class="img-fluid w-100" />
    </div>
  </div>
  <div class="row ">
    <div class="col-sm-2">
      <img src="https://picsum.photos/150/100" alt="" class="img-fluid w-100" />
    </div>
    <div class="col-sm-10">
      <h2>Alignment by default</h2>
      <p>Alignment helps organize and order the content, controlling how the eye flows from one component to the next. It is the organization and creation of invisible lines. Without alignment, users will have a hard time recognizing how elements relate to eachother, and your page will look messy and disorganized.</p>
    </div>
  </div>
</div>