- This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
Viewing 2 posts - 1 through 2 (of 2 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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.
I think this is what you’re looking for:
<div class="col-md-4">1</div>
<div class="col-sm-6 col-sm-push-6 col-md-5 col-md-push-0 ">2</div>
<div class="col-sm-6 col-sm-pull-6 col-md-3 col-md-pull-0">3</div>
Using push-0 and pull-0 resets your ordering.