CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Martin Geisse
Martin Geisse

Reputation: 1431

change Bootstrap DIV order depending on screen size

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.

Upvotes: 12

Views: 23142

Answers (5)

Christina
Christina

Reputation: 34652

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.

enter image description here

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

SMALL VIEW PORT:

enter image description here

LARGE VIEW PORT:

enter image description here

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>

Upvotes: 8

Khan
Khan

Reputation: 2982

If you can set the editor and the preview to be a fixed height in the desktop view, it's pretty easy to do this:

HTML

<div class="container">
  <div class="row">
    <div class="col-lg-6">
      <div class="editor">
        editor.
      </div>
    </div>
  </div>
  <div class="errors">
    errors.
  </div>
  <div class="preview">
    preview.
  </div>
</div>

CSS

.container {position: relative;}

.editor {height: 200px; overflow: auto; background: #eee;}
.errors {min-height: 100px; margin: 15px 0; background: #eee;}
.preview {min-height: 100px; background: #ddd;}

@media (min-width: 1200px) {
  .preview {position: absolute; top: 0; right: 15px; width: 575px; height: 200px; }
}

Demo

http://www.bootply.com/4jpGHUJWzp

Upvotes: 0

Jordan.J.D
Jordan.J.D

Reputation: 8113

I came up with a fun solution for you: BOOTPLY. This incorporates using the pull-right class to move the preview column on a large viewport, then changing marginTop (to move the div up) the combined height of the other 2 divs. this lands it in the exact place you want.

HTML:

<div class="container">
<div class="row">
  <div id="editor" class="col-xs-12 col-lg-6" style="background-color:red;">editor</div>
    <div id="errors" class="col-xs-12 col-lg-12" style="background-color:blue;">errors</div>
    <div id="preview" class="col-xs-12 col-lg-6 pull-right" style="background-color:green;">preview</div>
</div>

Jquery:

    var h=0;
$(document).ready(function(){
    h=document.getElementById("errors").offsetHeight + document.getElementById("editor").offsetHeight;

  $("#preview").css("marginTop", "-="+h);
});

Large viewport:

large viewport custom

Now the problem with this solution right now is when you move to the small viewport, preview overlaps editor, so if you use the same height variable and do the opposite movement ( marginTop: "+=" +h) to it on the smaller viewport, it'll be put back in place.

The main benefit of this solution is avoiding multiple of the exact same divs

Upvotes: 0

Pepelius
Pepelius

Reputation: 1609

I would recommend to check this to help you on this.

Working with Bootstrap on a daily basis and for me this is working good. To make something more "radical" could set you in a position where by you should re-build the base CSS code to fit your needs.

Another solution would be to use jQuery to append or prepend these divs when turning to mobile. Hopefully some of this helps you!

Upvotes: 0

Suganth G
Suganth G

Reputation: 5156

Try this:

<div class="row">
                <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12">
                    editor 
                </div>
                <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12 hidden-md hidden-lg">
                    errors 
                </div>
                <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12 ">
                    preview  
                </div>
                <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12 hidden-sm hidden-xs">
                    errors 
                </div>
            </div>

Upvotes: 1

Related Questions