title: Trying to align an image to the right middle of a column in bootstrap
body: <p>I'm trying to align an image in my bootstrap column to the right and have the text wrap around it on the left like this: <a href="https://codepen.io/freeCodeCamp/full/YqLyXB" rel="nofollow noreferrer">https://codepen.io/freeCodeCamp/full/YqLyXB</a></p>
  
  <p>I've been researching flexbox and vertical align all day instead of doing my job (woops) and feel like it's time to just ask the experts. Here's what mine looks like:
  <a href="https://codepen.io/Seaplush/pen/rKVLmX" rel="nofollow noreferrer">https://codepen.io/Seaplush/pen/rKVLmX</a></p>
  
  <pre><code>.col2 img{
  max-width: 100%;
    height: 50%;
    float: right;
  }
  
  
    .col2{
    background-color: #cccccc;
    height: 50vh;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
   }
  </code></pre>
  
  <p>Thanks for the help, this is my first website attempt so sorry if it's a bit of a mess to look through ;)</p>