title: Rotate image depending on screen size
body: <p>I am trying to figure out how to rotate an image in a div depending on the screen size.</p>
  
  <p>Basically there is this set up:</p>
  
  <pre><code>&lt;div&gt; &lt;div with arrow pointing right &gt; &lt;div&gt;
  </code></pre>
  
  <p>in a fluid row (bootstrap) and I need the arrow image to rotate 90 degrees to a down position because when in a mobile the divs will stack.</p>
  
  <p>I thought about using a blank <code>&lt;div&gt;</code> and a background-image and media queries to change the image, but having to have a blank <code>&lt;div&gt;</code> with set pixel dimensions isn't great (or is it?).</p>
  
  <p>Another thought was to have an <code>&lt;img&gt;</code> of the arrow inside the <code>&lt;div&gt;</code> and perhaps use jQuery to rotate it depending on screen size, but seems OTT, and possibly beyond me to figure out how to do it.</p>
  
  <p>Any suggestions or hints would be more than welcomed. Maybe I am missing something really simple.</p>