Bootstrap 3 changing div order on small screens only

user_589961 0
Viewed 73772

Doing my 1st responsive design and is something like this possible in Bootstrap 3. Change this

To

Change the order essentially from a 3 column layout on large screens to moving the logo to left and stack the other two columns on smaller screens only. I would like to do it using the Bootstrap classes (col-xs-6 col-md-4 etc.) if possible and not have to duplicate content in a show/hide sort of fashion. I liked the grid layout bootstrap3 provides for large screens so would prefer to keep it if could sort out the layout on smaller screens.

twitter-bootstrap mobile sorting css
6 Answers

I made a small jQuery script that you can fiddle with, to get the desired outcome. Basicly it just detects mobile viewports, and then reorders divs based on their col-class:

let isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;

if (isMobile) {
    var colArray = []; // Make an array of all your columns
    $('.column').each(function () { // Select all the desired columns based on a custom class selector

        if ($(this).hasClass('col-md-6')) { // <--- Change your conditions here
            colArray.unshift($(this));  // if condition is met, the column will be placed as the first element in the array, in my case all my col-md-6's
        } else {
            colArray.push($(this));
        };
    });

    //Now you have an array of the columns, ordered by your conditions
    for (var i = 0, l = colArray.length; i < l; i++) {
        //Just just iterate through the array, and insert each div before the next
        colArray[i].insertBefore(colArray[i+1]);
    }
}
user_22149800
Related