eq.js sample code, by @rupl

js'd_markup.html

<div class="bio" data-eq-state="medium" data-eq-pts="medium: 412, large: 688">
  <img src="path/to/my/face.jpg" alt="white male web developer">  
  <h2>Chris Ruppel</h2>
  <p>a frontend developer who makes websites load fast and shrink on your phone.</p>
</div>

markup.html

<div class="bio" data-eq-pts="medium: 412, large: 688">
  <img src="path/to/my/face.jpg" alt="white male web developer">  
  <h2>Chris Ruppel</h2>
  <p>a frontend developer who makes websites load fast and shrink on your phone.</p>
</div>

styles.scss

.bio {
  // Default "small" bios have a linear layout.
  // No styles needed.

  // Medium/Large: we want name/desc to read
  // like a sentence. Inline them and add the
  // word "is" after the name.
  &[data-eq-state$="medium"],
  &[data-eq-state$="large"] {
    h2, p {
      display: inline;
    }
    h2 {
      font-weight: 700;
    }
    h2:after {
      content: " is ";
    }
  }

  // Large: float the image to the left and bump
  // the font size up a notch.
  &[data-eq-state$="large"] {
    font-size: 1.2em;
    img {
      float: left;
    }
  }
}