Bootstrap - push/pull nested columns to a different level row

Question

I am new to Bootstrap and trying to build a responsive website. I am having difficulties with the Bootstrap Grid system when trying to sort the columns for different screens.

I have setup the "grid" below which is working fine (and I hope is valid). My problem is when viewing the site from tablet or phone I want the column "----2B----" to be push/pulled down under column "----1C----". I have tried push/pulling the column, but I can't seem to get this to work.

Am I doing the entire setup wrong or is this possible?

<div class="row center-block rounded-div white">
    <div class="col-md-6 col-md-push-6 col-lg-5 col-lg-push-7">
        <div class="row">
            <div class="col-lg-12">
                -----1A-----
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                -----1B-----
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                -----1C-----
            </div>
        </div>
    </div>

    <div class="col-md-6 col-md-pull-6 col-lg-7 col-lg-pull-5">
        <div class="row">
            <div class="col-lg-12">
                -----2A-----
            </div>
    </div>
        <div class="row">
            <div class="col-lg-12">
                -----2B-----
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                -----2C-----
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                -----2D-----
            </div>
        </div>

    </div>
</div>

I have tried to sketch what I want to accomplish all in all: Desktop and mobile layout

It would be helpful if you could post an image depicting both of the desired layouts (desktop and mobile). Do you want 2 columns on mobile too? — Carol Skelly, Jun 24 '15 at 11:29
@Skelly - I have edited my question and added a layout to it, so you can see what I am trying to make. — MazeyMazey, Jun 24 '15 at 13:17

score 0 · Answer 1 · answered Jun 24 '15 at 10:06

The order of your columns doesn't not allow it. You could use jQuery swapping... something like $('element1').before($('element2'))

Example:

$(document).ready(function() {
     $('.a2').before($('.b2'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row center-block rounded-div white">
    <div class="col-md-6 col-md-push-6 col-lg-5 col-lg-push-7">
        <div class="row">
            <div class="col-lg-12">
                -----1A-----
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                -----1B-----
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                -----1C-----
            </div>
        </div>
    </div>

    <div class="col-md-6 col-md-pull-6 col-lg-7 col-lg-pull-5">
        <div class="row a2">
            <div class="col-lg-12">
                -----2A-----
            </div>
    </div>
        <div class="row b2">
            <div class="col-lg-12">
                -----2B-----
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                -----2C-----
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                -----2D-----
            </div>
        </div>

    </div>
</div>

score 0 · Answer 2 · answered Jun 24 '15 at 10:13

0

With your HTML structure. Its hard to do. So my solution is use visible control classes

<div class="row">
    <div class="col-lg-12">
        -----1C-----
    </div>
    <div class="visible-xs-12">
        -----2B----- <!-this only visible on extra small devices with column 12 ->
    </div>
</div>

Resources: http://getbootstrap.com/css/#responsive-utilities

answered Jun 24 '15 at 10:13

PJ3

3,870
1
30
34

This could very well be the solution @user3333933, but I am a bit worried what influence this will have on the SEO. By doing this (when viewing the sorce code) the column is "duplictaed" and shown both places as I have to use `visible.xs` and `hidden.xs` in getting the correct view. – MazeyMazey Jun 24 '15 at 10:32
it is possible if you have large amount of keywords contained inside the div. if it's a small description i think it's ok. my suggestion is if this matters to your websites user experience, do it. – PJ3 Jun 24 '15 at 10:46
The div contains a Bootstrap collapse element and unfortunately after just testing I can conclude that by using .hidden and .visible the collapse element only works in the original div (hidden on phone screens). So this will unfortunately not work. I am just unable to see how else I should set up the grid to acheive this and resolving the issue. I have tried to setup one row with 7 columns inside, but I have not been able to get this working correctly neither. – MazeyMazey Jun 24 '15 at 10:56
bootstrap collapse element works on mobile devices correctly. not clear why its not working. it also not depend on parents div in this case ( we only hide and show on devices ) – PJ3 Jun 24 '15 at 11:32

Carol Skelly · Answer 3 · 2018-04-10T11:39:21.360

I think this is the closest you can get with Bootstrap. It also doesn't work for the reverse a4,a3 order on mobile. Also, the position of columns depends on height of neighboring columns.

<div class="row">
    <div class="col-xs-12 col-md-6 col-md-push-6">
        <div class="row">
            <div class="col-xs-12 col-md-12"><div class="well xtall">b1</div></div>
            <div class="col-xs-12 col-md-12"><div class="well">b2</div></div>
        </div>
    </div>
    <div class="col-xs-12 col-md-6 col-md-pull-6">
        <div class="row">
            <div class="col-xs-12 col-md-12"><div class="well tall">a1</div></div>
            <div class="col-xs-12 col-md-12"><div class="well tall">a2</div></div>
        </div>
    </div>
    <div class="col-xs-12 col-md-6">
        <div class="row">
            <div class="col-xs-12 col-md-12"><div class="well tall">a4</div></div>
            <div class="col-xs-12 col-md-12"><div class="well">a3</div></div>
        </div>
    </div>
    <div class="col-xs-12 col-md-6"><div class="well tall">b3</div></div>
    <div class="col-xs-12 col-md-6"><div class="well">a5</div></div>
  </div>

http://codeply.com/go/XCTc3U4bWh

In Bootstrap 4, it is possible to change the order of full width (12 units) columns.

Also see: Change the order of col-*-12 columns in Bootstrap 3 by using push/pull

Bootstrap - push/pull nested columns to a different level row

3 Answers3