title: change Bootstrap DIV order depending on screen size
body: <p>Scenario: I have an editor widget (think textarea) for a renderable template, a preview panel for the edited template, and a list of error messages generated when rendering the preview. My intended layout is like this:</p>
  
  <pre><code>small screen:            large screen:
  
  +--------------+         +--------------+ +--------------+
  |              |         |              | |              |
  |    editor    |         |    editor    | |    preview   |
  |              |         |              | |              |
  +--------------+         +--------------+ +--------------+
  |              |         +-------------------------------+
  |    errors    |         |                               |
  |              |         |            errors             |
  +--------------+         |                               |
  |              |         +-------------------------------+
  |   preview    |         
  |              |
  +--------------+    
  </code></pre>
  
  <p>I only need those two layouts (not three or four), as only -lg is large enough to make sense for the editor and preview to be next to each other. To control the sizes, I added col-xs-12 to all three DIVs and col-lg-6 to the editor and preview (the error list should stay at 12 on large screens).</p>
  
  <p>Other posts about the topic have suggested that the "smallest" layout dictates the order of the DIVs in the HTML, so that would be: editor, errors, preview. They further tell to change the order on large screens with -pull- and -push- classes. I tried doing that by adding col-lg-pull-6 to the preview and col-lg-push-6 to the errors. As far as I understand, push/pull work relative to the current position of the elements, so that should have pulled the preview back into the first row, and pushed the errors box into the second row.</p>
  
  <p>Note that I didn't use the "row" classes as I don't fully understand <em>how</em> to use them; the placement of elements into rows should depend on the screen size, not fixed by the HTML (that's the whole point of a responsive layout, isn't it?)</p>
  
  <p>Other posts have also suggested to render one of the boxes <em>twice</em>, making one of them invisible depending on screen size, but they lack thorough explanation why this is a good idea. This is purely a layout issue, and again the whole point of a responsive layout is so I don't have to mess up the HTML to adapt to screen sizes.</p>