0

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?

paulalexandru
  • 9,218
  • 7
  • 66
  • 94
  • 1
    Some of the comments in the answers should be placed into the question, because as the question stands, Gabriel has the correct answer. – Goose Jan 26 '17 at 00:35
  • This has been asked many times on SO. The answers below are correct too.. just use push/pull and reverse the A-B to B-A in your markup. – Carol Skelly Jan 26 '17 at 03:34

3 Answers3

1

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/

ske57
  • 577
  • 4
  • 21
  • If you actually open the link and read the information you would see it contains a demo and the code example, but ask and you shall receive -http://codepen.io/sevilayha/pen/ihgLz?editors=100 – ske57 Jan 25 '17 at 23:52
  • I've updated the answer. This give the expected behavior detailed in the question. If you are having issues then you need to provide more information to help us help you. – ske57 Jan 26 '17 at 00:17
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

Gabriel
  • 2,170
  • 1
  • 17
  • 20
  • 2
    No, I prefer to guide users, allowing them to keep the research, instead. Basically, you have to think your HTML for mobile first, place the divs as you would like to be shown on mobile. Then add `col-lg-push-9` class to the one you want to _push_ to the right and `col-lg-pull-3` to the one you want to _pull_ to the left on large screens. – Gabriel Jan 25 '17 at 23:48
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

Neha Parab
  • 76
  • 7