Paragraph's won't wrap around image

Question

This is normally a simple task but I just lost over an hour to it and there seems to be no answer that works.

I just want to wrap some paragraphs around an image. I've tried every combination of div and styling I could think of or find to no avail. Any help would be appreciated.

<div class="row">
  <div class="col-sm-12" id="aboutCol">
    <p>Class is dead,” says Foucault; however, according to Reicher, it is not so much class that is dead, but rather the absurdity, and some would say the paradigm, of class. However, the subject is interpolated into a postpatriarchialist dialectic theory that includes consciousness as a totality." Lorizzle ipsum bling bling sit amizzle, consectetuer adipiscing elit. Nizzle sapien velizzle, bling bling volutpat, suscipit , gravida vel, arcu. Check it out hizzle that's the shizzle. We gonna chung erizzle. Fo izzle dolor fo turpis tempizzle tempor. Gangsta boom shackalack mofo et turpizzle. Sizzle izzle tortor. Pellentesque uhuh ... yih!</p>
    <p>Tendrils of gossamer clouds! Globular star cluster explorations permanence of the stars dream of the mind's eye dispassionate extraterrestrial observer, of brilliant syntheses, how far away, Flatland, Sea of Tranquility rogue! Stirred by starlight how far away! Radio telescope hydrogen atoms something incredible is waiting to be known. Science? Consciousness across the centuries made in the interiors of collapsing stars.</p>
    <p>As a patch of light, Orion's sword quasar cosmic ocean. Kindling the energy hidden in matter muse about, stirred by starlight and billions upon billions upon billions upon billions upon billions upon billions upon billions.</p>
    <div id="profPic">
      <img class="profPics" src="/images/profile.jpg" alt="Profile Picture">
    </div>
  </div>
</div>
<br>
<div class="row">

and the css...

#profPic {
  width: 25%;
  float: right;
  margin-left: 20px;
  margin-bottom: 20px;
}

#profPic img {
  max-width: 100%;
  border-radius: 50%;
  filter: grayscale(30%);
}

Answer 1

It's because the image is below the text. Text after the right floated image would flow around the image. Text that proceeds it has already been laid out and is not affected by later content.

Move the image up above the text to see the desired layout.