Twitter Bootstrap Question posted in

Switch two div in responsive design – Twitter bootstrap

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.

Tags:

3

Answers


  1. 0

    using media rules

    @media screen and (max-width: 480px) {
    .container {
        float: left; // or something
    }
}
    Login or Signup to reply.
  2. 0

    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;
    }
}
    Login or Signup to reply.
  3. 0

    The issue caused because display: flex won’t support in major browsers.

    Insted of this you can achieve easily by using the float property in media queries.

      @media (max-width: 400px) {
    .col {
       float: right;
    }
}

    enter link description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search