CODEWITHSUNDEEP
twitter-bootstrap-3
i2dotnet
i2dotnet

Reputation: 33

Is there a way to reorder bootstrap 3 columns vertically

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

Upvotes: 3

Views: 3726

Answers (2)

mmgross
mmgross

Reputation: 3092

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.

Upvotes: 5

idavidmcdonald
idavidmcdonald

Reputation: 103

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.

Upvotes: 1

Related Questions