title: Centering a div after a float underneath on browser resize
body: <p>I have the following html-</p>
  
  <pre><code> &lt;div class="container"&gt;
    &lt;h1 class="page-header" id="property_head"&gt;A cool title&lt;/h1&gt; 
    &lt;div class="row text_img"&gt;
      &lt;div class="span9"&gt;
        &lt;div class="row"&gt;
          &lt;div class="span3" id="activity"&gt;&lt;img src="http://some/img.png"&gt;&lt;/div&gt;
          &lt;div class="span5" id="activity_text"&gt;&lt;h3 class="text_title"&gt;Great Title&lt;/h3&gt;&lt;br&gt;&lt;p class="lead"&gt;Foo&lt;/p&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;  
    &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>and the following css-</p>
  
  <pre><code>.text_img {
    padding: 30px;
    margin-bottom: 30px;
    margin-left: 100px;
  
  }
  
  #activity {
    float: left;
    margin-right: 30px;
  }
  
  #activity_text {
    float: right;
    border:1px solid black;
  }
  </code></pre>
  
  <p>I'm using bootrap for <code>container</code> <code>page-header</code> <code>row</code> and <code>span3/5</code>. When I resize the browser below for ex 300px <code>#activity_text</code> positions itself underneath <code>#activity</code> which is what I want. </p>
  
  <p>I'm using media queries and I would like when the breakdown of the text positioning itself beneath the img, for the img to center above the text and remain that way for all width's below (using a media query). </p>
  
  <p>After trying multiple approaches I am unsure of the CSS to make this work. Thanks for your atteniton. Take a look at the attached.<img src="https://i.stack.imgur.com/2BFB4.png" alt="enter image description here"> <img src="https://i.stack.imgur.com/hOMyi.png" alt="enter image description here"></p>
  
  <p>NOTE: Changing the colors of the background to help notice the media query breakpoints</p>