Is there a way to reorder bootstrap 3 columns vertically

Question

I am using bootstrap 3 for one of my websites. I am pretty ok with bootstrap grid system, however I cannot find a method to do what I would like to do. What I want to do is the following:

Getting this layout for mobile

A
B
C
D
E

and this layout should become like this for computers (let's says first column is .col-sm-8 and the second is .col-sm-4)

A B
C E
D

Since you mentioned the correct classes, I assume you already put some thought and some work into this. Can you include whatever code you already have? — mmgross, Mar 21 '15 at 22:13
Than you for the answer. Yes I have been looking for a solution for hours. Actually, I can achieve the two layouts independently, but I cannot get one layout that wraps these two layouts. The code I have is this up to now [code snippet](http://www.bootply.com/EDiuN4BMeg). The problem I have is that the column E, for computer layout, is on the right but at the level of D, I want it to be just below B. — i2dotnet, Mar 22 '15 at 13:51
After you posted your code, I was able to identify the problem. I changed the title of your question to make it clearer, what the actual problem is, I hope that's ok with you. — mmgross, Mar 22 '15 at 17:17

score 5 · Accepted Answer · edited May 23 '17 at 11:46

Alas, what you are trying to do is not possible with bootstrap, at least not the way you tried it.

Contrary to what has been suggested in another answer and contrary to what even bootstraps official docs will make you believe, .col-*-push-* and .col-*-pull-* will not change the order of columns, just their horizontal position, so you can't use theses classes to move a column vertically.

Fortunately there are several things you actually can do, all of them have their pros and cons:

Change the vertical position of a div with CSS

This only works, if you know the height of the elements you have to move past, in your case .d. If you do, change your css to include the following (adjust the height to your needs):

.d {
    height:50px;
}
@media(min-width:768px) {
    .e {
        top:-50px;
    }
}

full example

Change the vertical position of a div with jQuery

If you don't know the height of .d, you can use jQuery to determine its height and change .es css accordingly:

if ($(window).innerWidth() >= 768) {
    $('.e').css('top', -$('.d').outerHeight());
}

full example

Again: This can be achieved without jQuery, using pure JS.

Reorder the elements using jQuery

The key here is that there will be no manual moving around of elements, but we'll actually remove an element from the DOM and insert it at a different position to actually change the order of the elements:

if ($(window).innerWidth() >= 768) {
    $('.e').detach().insertAfter('.c');
}

full example

Use elements multiple times and show them based on viewport size

You can include some elements several times and add the appropriate bootstrap classes .hidden-xs and .visible-xs-block

<div class="container">
    <div class="row">
        <div class="col-sm-8 a">A</div>
        <div class="col-sm-4 b">B</div>
        <div class="col-sm-8 c">C</div>
        <div class="col-sm-4 e hidden-xs">E</div>
        <div class="col-sm-8 d">D</div>
        <div class="col-sm-4 e2 visible-xs-block">E</div>
    </div>
</div>

full example

Might not be the best solution in regards of accessibility or search engine optimization, but if your content is static and you're only interested in how it looks on a screen, this is the easiest way.

Ok, thank you very much @mmgross for your complete explanation. I actually though about the last solution one time, but I cannot duplicate elements as SEO is pretty important. I will choose the third one, to reorder elements with jquery, that fits better my needs. All the solutions are useful and each one may be useful for different contexts. Thanks again. — i2dotnet, Mar 22 '15 at 21:21
That's another option available: flexbox. See this answer https://stackoverflow.com/a/47188741/449553 — msangel, Feb 18 '18 at 07:25

score 1 · Answer 2 · answered Mar 21 '15 at 22:27

1

A method to swap the orders of columns is to use the classes .col-md-push-* and .col-md-pull-* as referenced in the bootstrap documentation:

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

These should allow you to swap the order of columns for a specified screen size or larger (the examples given refer to 'md' or above sized screens). You therefore need to pick the appropriate screen size for which you wish for the columns to swap.

answered Mar 21 '15 at 22:27

idavidmcdonald

103
2
8

Thanks for you answer. Actually I have already tried to use these but it didnt fit for me... why? because the order of the columns is fixed for mobiles, this is exactly the order I want. If lets say I had B before A for the mobile layout, then I would have used col-sm-push ... to put the B column on the right, and applied col-sm-pull ... to A to put it back on the left. – i2dotnet Mar 22 '15 at 13:55

Is there a way to reorder bootstrap 3 columns vertically

2 Answers2

Change the vertical position of a div with CSS

Change the vertical position of a div with jQuery

Reorder the elements using jQuery

Use elements multiple times and show them based on viewport size

Linked