title: Bootstrap responsive design column breaking
body: <p>I am relatively new to media queries and responsive design.  I have a two column page body.  In column 1 I have a photo of a book.  In column 2 I have the author's name and a description.</p>
  
  <p>When I scale the window down to the size of a mobile phone, I want the author's name to appear above the photo, and the description to appear below the photo.</p>
  
  <p>How is this achieved?  Attached is a sample image of what I just described.</p>
  
  <p><img src="https://i.stack.imgur.com/F1O7p.jpg" alt="how it should look on desktop, and then on mobile"></p>