title: Placing second column on top when page is resized
body: <p>I am trying to make a responsive design on the page using bootstrap grid. </p>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;div class="row row-2"&gt;
      &lt;div class = "col-sm-4 col-sm-offset-2"&gt;
          &lt;img class="img-responsive header-notebookImg" src="Images/header/notebook.png" alt=""&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-4 body-slogan"&gt;
          &lt;p class="body-slogan"&gt; Save&lt;span class="body-slogan-word"&gt;your&lt;/span&gt; ideas with this application&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The css file only contains fonts and sizes. My question is: When I resize the page to trigger bootstrap extra small column class is it possible to put the second column on the top?</p>
  
  <p>With code above the second column goes on the bottom. I can't interchange the content of the columns as I want first column to be on the left on the bigger screen.</p>
  
  <p>Thanks in advance!</p>