marc08 marc08 - 7 days ago 5
CSS Question

Change div position depending on screen resolution (flexbox?)

this is what I am trying to achieve (images added below). I know that this can be done with media queries and its just adding different styles depending on the screen resolution. What i have for now is the smartphone version (presented below).

I cant figure out how i can put those two boxes ABOVE the "mytextbox" div on the version for tablets. I was trying different combinations with grid, pull-right/left etc and it doesnt seem to work. I just started reading about flexbox. Maybe thats an option here? If you have any ideas please help. Thank you!

<div class="container">
<div id="mytextbox" class="col-sm-12 col-xs-12">Text from the box</div>
<div id="box1" class="col-sm-6 col-xs-3 mybox">BOX NAME1</div>
<div id="box2" class="col-sm-6 col-xs-3 mybox">BOX NAME2</div>
<div id="box3" class="col-sm-6 col-xs-3 mybox">BOX NAME3</div>
<div id="box4" class="col-sm-6 col-xs-3 mybox">BOX NAME4</div>
</div>


On tablet:

enter image description here

On smartphone:

enter image description here

Answer

Yes you can use flexbox for this, to be precise, the order property on flex childs:

// Create a flex container
.container {
    display: flex;
    // Force default row wrapping behaviour as bootstrap initially intends.
    flex-flow: row wrap;
}

#mytextbox {
    // Make it the 3rd item in the container flow
    order: 3;
}

#box1 {
    order: 1;
}

#box2 {
    order: 2;
}

#box3 {
    order: 4;
}

#box4 {
    order: 5;
}

// 768 is the bootstrap small-media breakpoint
@media screen and (max-width: 768px) {
    #mytextbox {
        // When there's not enough space, make it the first item again
        order: 1;
    }

    #box1 {
        order: 2;
    }

    #box2 {
        order: 3;
    }

    #box3 {
        order: 4;
    }

    #box4 {
        order: 5;
    }   
}

See it in action on codepen (because: bootstrap css support)