title: How do I bootstrap an image and text side by side but when the screen is small the text goes over the image?
body: <p>Basically, I want half the screen to be my image and the other half to have my text. But if the screen is very small, I want the text to go over the image and the image and text shrink. So far I have the big screen working, but when I go into small screen the text is still huge (making it go off the screen) and is still to the right of the image.<br><br>
  .html: </p>
  
  <pre><code>&lt;div class="container-fluid"&gt; 
      &lt;div class="row"&gt;
          &lt;div class="col-xs-9 col-md-6"&gt;
              &lt;img class="img-responsive" src="styles/pics/brainimg.png" alt="Brain Image" width="960" height="819"&gt;
          &lt;/div&gt;
          &lt;div class="col-xs-3 col-md-6"&gt;
              &lt;div class="first"&gt; 
                  NAME HERE
              &lt;/div&gt;
              &lt;div class="second"&gt; 
                  DEVELOPER
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>.css</p>
  
  <pre><code>.first{
      font-family: Cinzel;
      color: black;
      font-size: 45px;
      font-weight: normal;
  }
  
  .second{
      font-family: Cinzel;
      color: black;
      font-size: 20px;
      font-weight: normal;
  }
  </code></pre>