html - change Bootstrap DIV order depending on screen size

Question

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:

small screen:            large screen:

+--------------+         +--------------+ +--------------+
|              |         |              | |              |
|    editor    |         |    editor    | |    preview   |
|              |         |              | |              |
+--------------+         +--------------+ +--------------+
|              |         +-------------------------------+
|    errors    |         |                               |
|              |         |            errors             |
+--------------+         |                               |
|              |         +-------------------------------+
|   preview    |         
|              |
+--------------+    

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).

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.

Note that I didn't use the "row" classes as I don't fully understand how 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?)

Other posts have also suggested to render one of the boxes twice, 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.

Answer 1

In your question you mention using rows. The .row clears the column floats and adjusts the left and right margins of the columns so that there is not extra padding on the outside, not using the .row will mess up your layout. Here's a very comprehensive guide to the Bootstrap grid: http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works.

Using Flexbox is the only way to do it in pure css. To address older browsers (including less than or equal to ie9), I use Modernizr (the one in this demo link adds .flexbox or .no-flexbox on the html element, it's just for this demo. In this way, you can isolate your use of the flex model on browsers that support it and your fallback will be the standard bootstrap columns you set in your html. Don't forget to follow the grid instructions on GetBootstrap.com. You will need to make your own build of Modernizr.

To get Bootstrap.css to work on IE8, you need to use Respond.js -- see their docs and link up the CSS locally with relative path. Use jQuery 1 series, greater than 1.10 though 1.9 works. jQuery 2 is not supported in older IE 8 browsers.

DEMO: http://jsbin.com/dimuq/1

---

SMALL VIEW PORT:

LARGE VIEW PORT:

CSS:

/* uses Modernizr to add .flexbox to html class, if not supported the fallback are the basic bootstrap grid */
@media (min-width:992px) { /* choose your min-width this is using the md- default */
  .flexbox .flex-row.row {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

  .flexbox .flex-row [class*=flexcol-] {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }
  
  .flexbox .flex-row .flexcol-editor, 
  .flexbox .flex-row .flexcol-preview {width:50%;}


  .flexbox .flex-row .panel {
        width: 100%;
        /*something to keep it open and add some inner style */
    }

  .flexbox .flex-row .flexcol-errors {
        order: 2;
        width:100%;
    }
}

Learn more about Flexbox here: http://css-tricks.com/snippets/css/a-guide-to-flexbox/ and http://philipwalton.github.io/solved-by-flexbox/

---

HTML -- requires Modernizr to check for flexbox and add class flexbox to the html (see demo js panel)

<div class="container">
  <div class="flex-row row">
      <div class="col-md-6 flexcol-editor">
        <div class="panel panel-default">
         <div class="panel-heading">Editor</div>
         <div class="panel-body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</div>
        </div>
      </div>
      
      <div class="col-md-6 flexcol-errors">
      
        <div class="panel panel-default">
         <div class="panel-heading">Errors</div>
         <div class="panel-body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et.</div>
        </div>
  
      </div>
      
    
      <div class="col-md-12 flexcol-preview clearfix">
        <div class="panel panel-default">
         <div class="panel-heading">Preview</div>
         <div class="panel-body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
        </div>
      </div>