title: How do I change order of objects based on window size? (HTML/CSS)
body: <p>I am creating a site utilizing the Bootstrap framework, and have a section for an "About Us" for our team with a picture in one <code>column</code> and the name/bio in the second <code>column</code>. I am handling window change with <code>@media (max-width: 1199px) {</code> in the accompanying CSS file.</p>
  
  <p>The way the section is formatted currently is:</p>
  
  <pre><code>&lt;div class="container team"&gt;
     &lt;h2&gt;Meet the Team&lt;/h2&gt;
     &lt;hr&gt;
     &lt;div class="row row-eq-height" id="ethan"&gt;
        &lt;div class="col-md-6" id="picture"&gt;
           &lt;img src="[Image Link]" width="500" height="350" alt="Ethan Blagg"&gt;
        &lt;/div&gt;
  
        &lt;div class="col-md-6" id="bio"&gt;
           &lt;div class="row" id="name"&gt;
              &lt;h3&gt;Ethan Blagg&lt;/h3&gt;
              &lt;hr&gt;
           &lt;/div&gt;
  
           &lt;div class="row" id="info"&gt;
              &lt;p&gt; [bio goes here] &lt;/p&gt;
           &lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This alternates:</p>
  
  <p><code>Picture</code> | <code>Name+Bio</code></p>
  
  <p><code>Name+Bio</code> | <code>Picture</code></p>
  
  <p><code>Picture</code> | <code>Name+Bio</code></p>
  
  <p><code>Name+Bio</code> | <code>Picture</code></p>
  
  <p>My issue is when I get below <code>992px</code> in window width, the formatting changes to:</p>
  
  <p><code>Picture</code></p>
  
  <p><code>Name+Bio</code></p>
  
  <p><code>Name+Bio</code></p>
  
  <p><code>Picture</code> </p>
  
  <p>etc.</p>
  
  <p>How do I change the order of the objects when the size of the window changes? </p>
  
  <p>I have them alternating from left/right in their containers when full size, but when it decreases below a certain size, the formatting goes vertical, as expected, but the order is poorly formatted. Is this something I would have to change in the HTML or CSS? </p>