title: adjusting image position using only html and css
body: <p>I need to move the picture to be on the right side of the list items.
  <a href="https://i.stack.imgur.com/PXNmM.png" rel="nofollow noreferrer">like this</a></p>
  
  <pre><code>    &lt;div class="section"&gt;
          &lt;div class="row mid-row"&gt;
              &lt;div class="col mid-title"&gt;
                  &lt;h3&gt;Lorem ipsum dolor sit amet, duis sapien. Aliquet sodales quam, accumsan etiam tristique laoreet dignissim massa, molestias etiam venenatis vestibulum sollicitudin&lt;/h3&gt;
                  &lt;ul class="col list-items flex-child"&gt;
                      &lt;li&gt;Lorem ipsum dolor sit&lt;/li&gt;
                      &lt;li&gt;Lorem ipsum dolor sit&lt;/li&gt;
                      &lt;li&gt;Lorem ipsum dolor sit&lt;/li&gt;
                      &lt;li&gt;Lorem ipsum dolor sit&lt;/li&gt;
                      &lt;li&gt;Lorem ipsum dolor sit&lt;/li&gt;
                      &lt;li&gt;Lorem ipsum dolor sit&lt;/li&gt;
                      &lt;li&gt;Lorem ipsum dolor sit&lt;/li&gt;
                      &lt;li&gt;Lorem ipsum dolor sit&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;img src="../src/cell_phone_img_croped_resized.jpg" alt="" class="col cell-phone-img_small flex-child"&gt;
              &lt;/div&gt;
              &lt;img src="../src/cell_phone_img_croped_resized.jpg" alt="" class="col cell-phone-img_large"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>it's also uploaded here: </p>
  
  <p><a href="https://codepen.io/tom-abarba/pen/eYYeoJe?fbclid=IwAR1R08diZDAnLVCGunrB9AxAlFkMDlJTy7j7__HMPwOp7Njg0GcyKiArAEo" rel="nofollow noreferrer">https://codepen.io/tom-abarba/pen/eYYeoJe?fbclid=IwAR1R08diZDAnLVCGunrB9AxAlFkMDlJTy7j7__HMPwOp7Njg0GcyKiArAEo</a></p>