title: Swap the positions of grids which are side by side to top and bottom using bootstrap
body: <p>I have two divs(content and an image) which  are side by side in medium screens.</p>
  
  <blockquote>
    <p>col-md-6(content) col-md-4(image)</p>
  </blockquote>
  
  <p>So, when the screen size is changed to small screens and xs screens these div's shouldn't be side by side they should be aligned top and bottom like this : </p>
  
  <blockquote>
    <p>image</p>
    
    <p>content</p>
  </blockquote>
  
  <p>Here's the code that I'm trying in medium screens:</p>
  
  <pre><code>&lt;div class="row"&gt;
  &lt;p class="col-md-6"&gt;Content comes here&lt;/p&gt;
  &lt;img src="someimage" class="col-md-4"/&gt;
  </code></pre>
  
  <p>i.e., the image should be on the top and the content should be below it in small screens.</p>
  
  <p>I'm not able to get the idea how to convert them top and bottom in small screens</p>
  
  <p>I know that grid positions can be changed to left and right by using push and pull but how do I move an element which is on the right side to the top? Thanks in advance :)</p>