...">
Clever Geek Handbook

How do I change the stacking order of columns?

Using Bootstrap 3, I have a very simple layout like:

<div class="container">
    <div class="row">
        <div class="col-sm-4">
            Header Content Left
        </div>
        <div class="col-sm-4">
            Header Content Middle
        </div>
        <div class="col-sm-4">
            Header Content Right
        </div>
    </div>
</div>

JSFiddle

On smaller devices, instead of stacking in a natural order, I would like it to stack like this:

Header Content Middle
Header Content Right
Header Content Left

I'm stuck on how to achieve this, can anyone point me in the right direction?

+3


source to share


3 answers


Bootstrap classes col-**

have a property position: relative;

. So when you install additional classes col-**-push-**

or col-**-pull-**

, you change the column order movement using the left

or properties right

.

You can try this:

<div class="container">
  <div class="row">
    <div class="col-sm-4 col-sm-push-4">
        Header Content Middle
    </div>
    <div class="col-sm-4 col-sm-push-4">
        Header Content Right
    </div>
    <div class="col-sm-4 col-sm-pull-8">
        Header Content Left
    </div>
  </div>
</div>


Example in Codepen here

PS One thing I know I have changed the order of the columns in my example to achieve the correct order of the columns when collapsing the columns.

+4


source


To extend the answer to nilhem, push and pull modifiers are what you are looking for.

From the doc:

It's easy to reorder our built-in grid columns with the .col-md-push- * and .col-md-pull- * classes.

Basically what these modifiers do is to push (move to the right) or pull (move to the left) a column based on the offset you supplied, where the starting point is based on the order of the column within the row. It can be read like this:

/* column  size  direction  offset */
   .col    -sm   -push      -4

So, for your example, you need something like:



<div class="row">
    <!--first column so start at 0 then push it to the right 4 -->
    <div class="col-sm-4 col-sm-push-4">
       Header Content Middle
    </div>

    <!-- start at 4 then push to the right 4 -->
    <div class="col-sm-4 col-sm-push-4"> 
        Header Content Right
    </div>

    <!-- start at 8 then pull to the left 8 -->
    <div class="col-sm-4 col-sm-pull-8">
        Header Content Left
    </div>
  </div>

DEMO

Here's a visual breakdown of what happens step by step:

  • before reordering:

    [    column 1    ][    column 2    ][    column 3    ]

    example

  • push first column offsets 4:

    [    offset 4    ][   column 1-2   ][    column 3    ]
                      ^ they are on top of each other at this point

    example

  • slide second column 4 offsets:

    [     offset 4    ][    column 1    ][  column 2-3   ]
                                        ^ they are on top of each other at this point

    example

  • pull out the third column 8 offsets:

    [     column 3    ][    column 1    ][  column 2     ]
      ^ column 3 falls into the open offset caused by column 1 push

    example

+6


source


use pull / push commands this way to achieve what you want:

<div class="container">
<div class="row">
    <div class="col-sm-4 col-sm-push-8">
        Header Content Left
    </div>
    <div class="col-sm-4 col-sm-pull-4">
        Header Content Middle
    </div>
    <div class="col-sm-4 col-sm-pull-4">
        Header Content Right
    </div>
</div>

http://jsfiddle.net/DTcHh/1040/

0


source






More articles:


All Articles