CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
dennis schütz
dennis schütz

Reputation: 383

Bootstrap - Push whole row to top

This is my lg layout: 

------------------------------------------------
|     3(xs4)|    3(xs4)|    3(xs4)|   3(12xs)  |
------------------------------------------------

This is my xs layout:

------------------------------------------------
|     4         |      4        |     4        |
------------------------------------------------   
|                  12                          |
------------------------------------------------

My html so far (without push and pull):

           <div class="row">
                            <div class="col-lg-3 col-sm-3 col-xs-4  text-center">

                            </div> 
                            <div class="col-lg-3 col-sm-3 col-xs-4  text-center">

                            </div> 
                            <div class="col-lg-3 col-sm-3 col-xs-4  text-center">

                            </div> 
                            <div class="col-lg-3 col-sm-3 col-xs-12  text-left">


                            </div>   

                       </div

What i need:

The last column of the lg layout has to be on top in the xs layout. When i use push and pull i can only change the position IN the row. The columns are not jumping automatically into next/previous row.

My desired result:

------------------------------------------------
|                  12                          |
------------------------------------------------
|     4         |      4        |     4        |
------------------------------------------------

Upvotes: 0

Views: 1082

Answers (1)

Turnip
Turnip

Reputation: 36682

You need to change the order of your elements in the HTML so that your col-*-12 is first. Then you can use push and pull like this:

/* For demo only... */
[class*="col-"] {
  outline: 1px solid red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
  <div class="col-lg-3 col-sm-3 col-xs-12 col-sm-push-9 text-left">
    12
  </div>
  <div class="col-lg-3 col-sm-3 col-xs-4 col-sm-pull-3  text-center">
    4
  </div>
  <div class="col-lg-3 col-sm-3 col-xs-4 col-sm-pull-3  text-center">
    4
  </div>
  <div class="col-lg-3 col-sm-3 col-xs-4 col-sm-pull-3  text-center">
    4
  </div>
</div>

Without changing the order of the elements you can not achieve your desired layout with push and pull.

Upvotes: 1

Related Questions