CODEWITHSUNDEEP
csstwitter-bootstrap
sidb
sidb

Reputation: 211

How to insert a column between two rows of another column during responsiveness in bootstrap

My normal layout is:

|A||C|

|B||C|

There are two columns - left and right. 'A' and 'B' are two rows of left column 'C' is right column.

When I resize, i want it to respond like:

|A|

|C|

|C|

|B|

Code:

<div class="container row">
    <div class="col-sm-8">
            <div class="row">
                a
            </div>
            <div class="row">
                b
            </div>
    </div>
    <div class="col-sm-4">
        c
    </div>
</div>

I think I have found the solution based on Dan's

<div class="container">
    <div class="row">
        <div class="col-sm-8">
            <div class="col-sm-12 col-xs-12" style="background-color: red">a</div>
            <div class="col-sm-6 col-xs-12 visible-xs" style="background-color: blue">c</div>
            <div class="col-sm-12 col-xs-12" style="background-color: orange">b</div>
        </div>
        <div class="col-sm-4 hidden-xs">
            <div class="col-sm-12 col-xs-12" style="background-color: blue">c</div>
        </div>
    </div>
</div>

Upvotes: 1

Views: 488

Answers (3)

Dan Beaulieu
Dan Beaulieu

Reputation: 19954

Based on my understanding of your needs this is how you accomplish your reordering using bootstrap the way it was intended:

<div class="container">
    <div class="row">
        <div class="col-sm-6 col-xs-12">a</div>
        <div class="col-sm-6 col-xs-12">c</div>
        <div class="col-sm-push-6 col-sm-6 col-xs-12">c</div>
        <div class="col-sm-pull-6 col-sm-6 col-xs-12">b</div>
    </div>
</div>

jsFiddle

Here's a link to the official bootstrap documentation on ordering.

Update based on comments:

Here's a solution using bootstrap exclusively:

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <div class="col-sm-12 col-xs-12">a</div>
            <div class="col-sm-12 col-xs-12">c</div>
            <div class="col-sm-12 col-xs-12 visible-xs">c</div>
            <div class="col-sm-6 col-xs-12 visible-xs">b</div>
        </div>
        <div class="col-sm-6 hidden-xs">
            <div class="col-sm-12 col-xs-12">c</div>
            <div class="col-sm-12 col-xs-12">b</div>
        </div>
    </div>
</div>

jsFiddle

Upvotes: 3

MintWelsh
MintWelsh

Reputation: 1259

could also use float as a solution (if you don't feel like using push/pull)

HTML

<div class="row">
    <div class="col-sm-6 col-xs-12 a">
    AAA            
    </div>
    <div class="col-sm-6 col-xs-12 c">
        CCC
    </div>
    <div class="col-sm-6 col-xs-12 c">
        CCC
    </div>
    <div class="col-sm-6 col-xs-12 b">
        BBB
    </div>
</div>

Css

.a,.b,.c{height:60px;}
.a{background:red;}
.b{background:yellow;}
.c{background:blue;float:right;}
@media screen and (max-width:767px){
    .c{float:none;}

Here's a jsfiddle jsfiddle

Upvotes: -1

AnuragBabaresco
AnuragBabaresco

Reputation: 604

.col-*-push-* and .col-*-pull-* are used to reorder columns for differnt screen sizes. So you would use .col-sm-pull-6 on column C2 and .col-sm-push-6 on column B. Simply adjust the amount of columns you need to push / pull to your layout.

Learn more at : getbootstrap.com/css/#grid

Upvotes: 0

Related Questions