User014019 User014019 - 1 month ago 15
CSS Question

Switch two div in responsive design

I'm trying to switch the column of two

div
's using twitter bootstrap in mobile/tablet view like this jsfiddle that applicable to all major browser in desktop and mobile phones (android and ios)

How to do this using twitter bootstrap or CSS only? I tried the JSfiddle mention above, but it's not working in mobile phones and need to configure some setting in firefox to be able run it.

Answer

In which phones / browsers didn't it work?

What if you add some vendor specific properties? Seems to work here:

http://jsfiddle.net/ivanchaer/8vy8khnq/2/

HTML

Resize this window until the divs switch places.
<div class="wrapper">
    <div id="first_div" class="col">first div</div>
    <div id="second_div" class="col">second div</div>
</div>
<a>Link</a>

CSS

.wrapper {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.col {
    width: 100px;
    float: left;
    border: 1px solid black;
    padding: 5px;
    /*flex-grow: 1;*/
}
#first_div {
    background: yellow;
    height: 200px;
}
#second_div {
    background: cyan;
    height: 100px;
}
@media (max-width: 400px) {
    .wrapper {
        -webkit-box-orient: horizontal;
        -moz-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -moz-box-direction: reverse;
        -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
        justify-content: flex-end;
    }
}
Comments