Bootstrap, pull-left for small devices

Question

I'm building a site in Bootstrap 3. Is there anyway to make a element use the class pull-left on smaller devices and use pull-right on larger ones?

Something like: pull-left-sm pull-right-lg.

I've managed to do it with jquery, catching the resize of the window. Is there any other way? Pref without duplicating the code in a hidden-x pull-left. Or is it considered more ok to duplicate code/content now when going responsive?

Duplicate of http://stackoverflow.com/q/19404861/89818 with complete drop-in solution here: http://stackoverflow.com/a/41731135/89818 — caw, Jan 19 '17 at 01:29

Alex · Answer 1 · 2014-09-24T11:25:59.043

60

Just add this to your SASS file:

@media (max-width: $screen-xs-max) {
    .pull-xs-left {
        float: left;
    }
    .pull-xs-right {
        float: right;
    }
}

@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
    .pull-sm-left {
        float: left;
    }
    .pull-sm-right {
        float: right;
    }
}

@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
    .pull-md-left {
        float: left;
    }
    .pull-md-right {
        float: right;
    }
}

@media (min-width: $screen-lg-min) {
    .pull-lg-left {
        float: left;
    }
    .pull-lg-right {
        float: right;
    }
}

Insert actual px values for $screen-* if you use plain CSS of course.

HTML:

<div class="pull-md-left pull-lg-left">
    this div is only floated on screen-md and screen-lg
</div>

edited Sep 24 '14 at 11:25

answered Jan 15 '14 at 11:51

Alex

12,205
7
42
52

1

@Alex, how could this be adjusted to follow how columns are treated? I.e. naming the screen size you want to target and it floats for that size AND UP. Would you simply remove the max-width settings on each media definition? I've done this but wanted a second opinion if this was the best method. – soycharliente Apr 30 '15 at 13:41
3

Bootstrap 3 includes the desired classes: use "column ordering". E.g. "col-md-9 col-md-pull-3 col-lg-8 col-lg-push-4". http://getbootstrap.com/css/#grid-column-ordering – ToolmakerSteve Apr 23 '16 at 00:39
@gtcharlie Yes, that's the way to do it. Additionally, you can drop the `@media (max-width: $screen-xs-max) {}` condition since that's the default, anyway. You might even drop the rules for `.pull-xs-left` and `.pull-xs-right` completely because they're redundant, given that the plain `.pull-left` and `.pull-right` still exist. – caw Jan 18 '17 at 23:15

palerdot · Accepted Answer · 2017-08-09T05:43:41.920

30

You can use CSS Media Queries

basic usage will be like this; if you want to float left below devices of width 500px, then

@media (max-width: 500px) {
 .your_class {
    float: left;
  }
}

 @media (min-width: 501px) {
 .your_class {
    float: right;
  }
}

edited Aug 09 '17 at 05:43

answered Aug 20 '13 at 07:51

palerdot

7,416
5
41
47

This worked for me but with bootstrap 3 I changed the 500px and 501px to 767px and 768px – AJ. Oct 31 '13 at 21:53
Bootstrap 3 includes the desired classes: use "column-ordering". E.g. "col-md-9 col-md-pull-3 col-lg-8 col-lg-push-4". http://getbootstrap.com/css/#grid-column-ordering – ToolmakerSteve Apr 23 '16 at 00:40
this will not work in bootstrap cause bootstrap using !important – Anthony Kal Jul 09 '17 at 14:39

score 7 · Answer 3 · edited Oct 26 '18 at 17:08

7

There is no need to create your own class with media queries. Bootstrap 3 already has float ordering for media breakpoints under Column Ordering.

The syntax for the class is col-<#grid-size>-(push|pull)-<#cols> where <#grid-size> is xs, sm, md or lg and <#cols> is how far you want the column to move for that grid size. Push or pull is left or right of course.

I use it all the time so I know it works well.

edited Oct 26 '18 at 17:08

Alexandre Aimbiré

1,494
2
14
26

answered Feb 28 '15 at 09:05

Quinn

301
3
5

3

Here's a short sample: `
`
– Ben Downey Mar 17 '16 at 16:12
1

@BenDowney but your sample doesn't work? .col-xs-push-6 does left: 50%, this works for relative or absolute positioned elements and for example if I want to pull left on desktop but center on mobile I still need transform: translateX(-50%); on inner element. If I understand that right... – Marko May 05 '16 at 12:30

score 3 · Answer 4 · edited Jan 30 '18 at 09:22

3

Possibly you can use column ordering.

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

Looks like floating columns will be getting added to version 4 by like @Alex has done - https://github.com/twbs/bootstrap/issues/13690

edited Jan 30 '18 at 09:22

Qullbrune

1,925
2
20
20

answered Aug 06 '14 at 21:41

John Magnolia

16,769
36
159
270

score 2 · Answer 5 · answered Aug 20 '13 at 07:51

2

Yes. Create your own style. I don’t know what element you’re trying to float left/right, but create an application.css file and create a CSS class for it:

/* default, mobile-first styles */
.logo {
    float: left;
}

/* tablets and upwards */
@media (min-width: 768px) {
    .logo {
        float: right;
    }
}

Don’t be afraid to write custom CSS. Bootstrap is meant to be exactly that: a bootstrap, a starter point.

answered Aug 20 '13 at 07:51

Martin Bean

38,379
25
128
201

Any reason you chose the other answer over mine? – Martin Bean Aug 22 '13 at 13:18
No, no reason. They looked very similar so then I took the first one. That doesn't change the fact that I'm still very glad for your response and if I could choose yours aswell I would. Didn't meen do disrespect anyone, my appologies if I did. – Christoffer Eklund Sep 05 '13 at 14:16
This solves the problem but does not answer in context. Of course we can write custom. But the context is if you can do it with the standard bootstrap classes. – JGallardo Oct 29 '15 at 23:31

score 0 · Answer 6 · answered Jun 18 '14 at 09:19

This is what i am using . change @screen-xs-max for other sizes

/* Pull left in mobile resolutions */
@media (max-width: @screen-xs-max) {
    .pull-xs-right {
        float: right !important;
    }
    .pull-xs-left {
        float: left !important;
    }

    .radio-inline.pull-xs-left  + .radio-inline.pull-xs-left ,
    .checkbox-inline.pull-xs-left  + .checkbox-inline.pull-xs-left  {
        margin-left: 0;
    }
    .radio-inline.pull-xs-left, .checkbox-inline.pull-xs-left{
        margin-right: 10px;
    }
}

score 0 · Answer 7 · answered Dec 14 '18 at 16:25

LESS version of @Alex's answer

@media (max-width: @screen-xs-max) {
    .pull-xs-left {
        .pull-left();
    }

    .pull-xs-right {
        .pull-right();
    }
}

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
    .pull-sm-left {
        .pull-left();
    }

    .pull-sm-right {
        .pull-right();
    }
}

@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
    .pull-md-left {
        .pull-left();
    }

    .pull-md-right {
        .pull-right();
    }
}

@media (min-width: @screen-lg-min) {
    .pull-lg-left {
        .pull-left();
    }

    .pull-lg-right {
        .pull-right();
    }
}

Bootstrap, pull-left for small devices

7 Answers7

Linked

Related