Twitter Bootstrap Question posted in

Twitter Bootstrap – Left column display after right container on mobile devices

This is my code:

<div class="row">
    <div class="col-sm-12 col-lg-3">
        A
    </div>
    <div class="col-sm-12 col-lg-9">
        B
    </div>      
</div>

This is my template on desktop device:

+-------+-------+-------+-------+
|       |                       |
|   A   |           B           |
|       |                       |
+-------+-------+-------+-------+

This is my template on mobile device:

+-------+-------+-------+-------+
|                               |
|               A               |
|                               |
+-------+-------+-------+-------+
|                               |
|               B               |
|                               |
+-------+-------+-------+-------+

But I want my template to look like this on mobile device:

+-------+-------+-------+-------+
|                               |
|               B               |
|                               |
+-------+-------+-------+-------+
|                               |
|               A               |
|                               |
+-------+-------+-------+-------+

Is there any way to achieve this without having to change my initial structure?

Tags:

3

Answers


  1. 0

    You can change the order in the HTML (first div B), being this the order for mobile, and change the order in desktop with col-lg-push-* and col-lg-pull-*.

    See http://getbootstrap.com/css/#grid-column-ordering

    Login or Signup to reply.
  2. 0

    You can use the col push & pull class to achieve this quite easily. There is a good explanation here which should help.

    To spell it out, you need to move B above A, then pull A across 9 cols for large screen (col-lg-pull-9) and push B across 3 cols for larger screens( col-lg-push-3). Therefore, the code will be:

    <div class="row">
    <div class="col-sm-12 col-lg-9 col-lg-push-3">
        B
    </div> 
    <div class="col-sm-12 col-lg-3 col-lg-pull-9">
        A
    </div>
</div>

    OK, reading your comments below, you stated you can’t changes the order of the divs. Can you use jQuery? If so, try this:

    $(document).ready(function(){
    if ($(window).width() < 768){
        alert("mobile");
        $("#divB").insertBefore("#divA");
    }
    else {
        alert("not mobile");
    }
});

    http://jsfiddle.net/humotrj0/173/

    Login or Signup to reply.
  3. 0

    You need to use the col-lg-push and col-lg-pull options
    You cannot change the order of columns in smaller screens but you can do that in large screens.

    So change the order of your columns.

    <div class="row">

    <div class="col-lg-9 col-lg-push-3">
        B
    </div>    
    <div class=" col-lg-3 col-lg-pull-9">
        A
    </div>
</div>

    By default this displays the main content first.

    So in mobile main content is displayed first.

    By using col-lg-push and col-lg-pull we can reorder the columns in large screens and display sidebar on the left and main content on the right. View it working in Bootsnipp

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

Back To Top
Search