Change Bootstrap Div Order Depending On Screen Size

May 29, 2024 Post a Comment

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 pre

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

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">
  <divclass="flex-row row"><divclass="col-md-6 flexcol-editor"><divclass="panel panel-default"><divclass="panel-heading">Editor</div><divclass="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><divclass="col-md-6 flexcol-errors"><divclass="panel panel-default"><divclass="panel-heading">Errors</div><divclass="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><divclass="col-md-12 flexcol-preview clearfix"><divclass="panel panel-default"><divclass="panel-heading">Preview</div><divclass="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>

Solution 2:

Try this:

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

Solution 3:

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!

Solution 4:

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:

Baca Juga

<div class="container">
<divclass="row"><divid="editor"class="col-xs-12 col-lg-6"style="background-color:red;">editor</div><divid="errors"class="col-xs-12 col-lg-12"style="background-color:blue;">errors</div><divid="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

Solution 5:

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

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

CSS

.container {position: relative;}

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

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