CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
HDP
HDP

Reputation: 4221

How to set Push/pull columns for Only smaller screen sizes in Bootstrap

I have the following layout on a page(with Bootstrap 3.2.0):

<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">1</div>
<div class="col-lg-5 col-md-5 col-sm-6 col-sm-push-6 col-xs-12">2</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-sm-pull-6 col-xs-12">3</div>

SO, it is working perfect in small screen(according to below).

 -----------------------
|           1           |
 ------------------------
|     3     |     2     |
 ------- ------- -------

But, Here, I have use col-sm-pull-* and col-sm-push-* for only small screen. though, Push/pull columns is call in Medium screen and Large screen.

if, I will use col-sm-push/pull-* & col-xs-push/pull-* So, why it is call(run) in large & medium screen?

Medium screen and Large screen:

I want to this                  I get this
 ------- --------- -----         ------- ----- ---------
|   1   |    2    |  3  |       |   1   |  3  |    2    |
 ------- --------- -----         ------- ----- ----------

So, How to set Push/pull columns only smaller screen?

What is wrong Here? How can i fix it?

Would appreciate the help.

Upvotes: 1

Views: 3037

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362430

You need to use *-push-0 and *-pull-0 to tell Bootstrap not to use push/pull on md and lg. Also I removed the lg since md alone will work in your case. 1-2-3 on large, 1-3-2 on mobile.

<div class="col-md-4 col-sm-12 col-xs-12">1</div>
<div class="col-md-5 col-md-push-0 col-sm-6 col-sm-push-6 col-xs-12">2</div>
<div class="col-md-3 col-md-pull-0 col-sm-6 col-sm-pull-6 col-xs-12">3</div>

Demo: http://www.bootply.com/PPTzE3ONur

Upvotes: 3

Sami
Sami

Reputation: 1051

Use push and pull for col-xs rather than col-sm i.e col-xs-push/pull-...

Replace your code with this :

<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">1</div>
<div class="col-lg-5 col-md-5 col-sm-6 col-xs-push-6 col-xs-12">2</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-pull-6 col-xs-12">3</div>

Upvotes: 0

Related Questions