Column push and pull for different grids

[mbrodala]

It would be useful to provide column push and pull classes for all three different grids.

This means that .col-push-* and .col-pull-* only affect the mobile grid and are joined by .col-push-sm-*, .col-pull-sm-* and .col-push-lg-*, .col-pull-lg-* to control the column order differently depending on the grid in use.

Summary: Allow for different column reordering in different grids.

[andyl]

I need this !

[mdo]

If you need this, you're doing it wrong.

This many modifiers for grid layouts is kind of ridiculous and unless someone can come up with a solid case for supporting them, we have no intention of doing that right now.

[andyl]

Here's my use case:

On a wide-screen device, I want columns to be arranged like so:
[content A][content B]

On a narrow device, the content should be arranged like:
[content B]
[content A]

Example # 2 - wide screen:
[contentA][contentB][contentC]

Example # 2 - narrow screen:
[contentB]
[contentA]
[contentC]

Is there a way to achieve this type of layout with the current Bootstrap classes??

[cvrebert]

@andyl http://jsfiddle.net/neJku/5/ ? (for your 2nd example)

[mbleigh]

@mdo I think that's a reasonable argument, but my question is: what's the point of having them at all if they don't have breakpoint specificity? If they're only meant to work at lg scale then they should only apply to lg scale. Right now they apply to all scales but can only be set to one value.

[andyl]

@cvrebert thanks for the JS fiddle - I extended your example to cover Example 1 and Example 2.

<div class="container show-grid">
    <div class='row'>
        <div class="col-12 col-sm-4 col-lg-4 col-push-4">
            Example 1 / Content B
        </div>
        <div class="col-12 col-sm-4 col-lg-4 col-pull-4">
            Example 1 / Content A
        </div>
    </div>
    <div class='row'>
    <div class="col-12 col-sm-3 col-lg-3 col-push-3">
        Example 2 / Content B
    </div>
    <div class="col-12 col-sm-3 col-lg-3 col-pull-3">
        Example 2 / Content A
    </div>
    <div class="col-12 col-sm-3 col-lg-3">
        Example 2 / Content C
    </div>
    </div>
</div>

[mbrodala]

I agree with @mbleigh. The current classes don't have much value since their effect pretty much the same as reordering the content itself. The real power comes from being able to specify the importance of content depending on the grid. But let's see if the structure mentioned in the comments here suffice for all day needs since they at least allow for different orderings on phones and larger screens.

[fabiogiolito]

I agree with @mbleigh, If they only work in one screen size we should drop .col-push and .col-offset altogether.
You'll end up having to write something to make it work on other screen sizes anyway, so better keep it lean.

But I'd prefer dropping offset, and making push/pull work for any screen size.

[plankguy]

Rather than adding a bunch of new classes (col-push-lg-, col-push-sm-...) I've submitted a pull request which simple will only apply the pull/push at the proper size. See Pull Request #8977

[eratzlaff]

@plankguy I am not an CSS expert but if you have col-lg and col-sm and for sm you want offset-4 and for lg offset-2.
class="col-offset-2 col-offset-4 col-sm-8 col-lg-10" could this work well??

[jtickle]

@eratzlaff, I am pretty sure that it won't work. col-offset-2 and col-offset-4 both exist in lg and sm, and the only way to specify "I want this one for the large grid and that one for the small grid" is to have separate classes.

If the only counterargument is that "this many modifiers for grid layouts is kind of ridiculous", I do have a different solution to propose.

Do implement lg-pull, lg-push, sm-pull, and sm-push; but eliminate offset altogether, because it seems to me that you can get the same behavior from push. See this Fiddle.

[plankguy]

@eratzlaff Sorry, I didn't make any changes to offsets, the changes were related to push/pull (source ordering). I wrote the wrong classes in my comment - which i've updated.

[eratzlaff]

@plankguy Sorry, I only read your comment. But I thing the same idea can be applied to push and pull. Maybe you want to push-3 on sm and push-3 on lg. I don't have a use case.
@jtickle As far I google around (margin-left != left). See this http://stackoverflow.com/a/6419557

[plankguy]

@eratzlaff The solution I provided only fixes basic source ordering on single screen size columns (either lg OR sm).

See an example of it here, under title "Source Ordering": http://jsfiddle.net/XRDGQ/3/embedded/result/

[eratzlaff]

@plankguy Here an example way I think you need sm and lg for pull and push

<div class="row">
   <div class="col-sm-6 col-lg-4">sm-6 lg-4</div>
   <div class="col-sm-6 col-lg-8">sm-6 lg-8</div>
</div>

and you want reorder for sm and lg. For sm you need to push and pull 6 col but for lg push-8 and pull-4

<div class="row">
   <div class="col-sm-6 col-lg-4 col-push-sm-6 col-push-lg-8">sm-6 lg-4</div>
   <div class="col-sm-6 col-lg-8 col-pull-sm-6 col-pull-lg-4">sm-6 lg-8</div>
</div>

[chanced]

The problem, in my opinion, is that by introducing different sized grids, you've in effect tripled the complexity and overall mess of the system. I've always hated the idea of class-based grid markup. I learned to accept it with BS2 because it was simple enough that pretty much anyone could easily grok it and it was light enough that I could muck with it when needed.

If you keep the multiple column sized markup and push, pull, and offset stay then, again in my opinion, you have to provide people with an easy way to offset/push/pull in accordance to the grid system.

If you need this, you're doing it wrong.

@mdo no offense but this is a pretty arrogant statement considering that you obviously haven't thought through this.

[plankguy]

@chanced Agreed, I think i'll look into multi-size source ordering - maybe set a variable option for it, so if pple would like to omit the functionality and reduce the weight of the grid CSS they can do so.

Also, does anyone know if there's a required version of LESS, i'd also like to convert the grid selectors to use loops, so that you actually can adjust the number of columns via @grid-columns. But the solution I plan on using will only work with LESS 1.4+.

[mdo]

I think that's a reasonable argument, but my question is: what's the point of having them at all if they don't have breakpoint specificity?

@mbleigh That's not a solid argument for adding them all over either. It sounds like folks are more hung up on the naming of them though, and if we rename them to be .offset-lg- then folks will also just continue to expect offsets at every level.

but eliminate offset altogether, because it seems to me that you can get the same behavior from push.

That's not correct—offsets are for skipping or spacing out columns with another column (e.g., 3 columns, one spacer column, and 8 columns).

The problem, in my opinion, is that by introducing different sized grids, you've in effect tripled the complexity and overall mess of the system.

@chanced How is the grid an overall mess? This adds the option to make the grid more complex, but you don't need to use them. Perhaps we haven't struck a solid balance yet though.

I've always hated the idea of class-based grid markup. I learned to accept it with BS2 because it was simple enough that pretty much anyone could easily grok it and it was light enough that I could muck with it when needed.

Your personal opinions aside, this is exactly why the classed based approach exists—it's easy to use and grok, especially for newcomers. The cool thing though is that all of this can be mixin-ed to any other class your heart desires if you go the Less route.

@mdo no offense but this is a pretty arrogant statement considering that you obviously haven't thought through this.

I think I was inaccurate when I said "you're doing it wrong", but I stand by the fact that adding more complexity to grid layouts will lead to more potential problems and more opportunities to put yourself in a hole for future development. If you think the grid is complicated now, this exacerbates if way more.

I didn't mean to sound arrogant, but it's shortsighted if you think I haven't thought these things through. The problem is though everyone else has thoughts of their own and feedback on having used this stuff, so naturally we might come to think things through differently.

I want to keep things as lean and simple as possible, and so I continue to push against adding features unless it's super clear that we need them. Given this thread and others, it seems like we might need to add them. I'm open to it, but to add something means making a clear and strong case for it.

Hope I didn't offend—just rather passionate about these things :).

[fabiogiolito]

offsets are for skipping or spacing out columns with another column

@mdo Sorry, I still don't see the different between push and offset, other than offset not working on md screens. Can you give an example?

These have the same result (push, offset):

  <div class="row">
    <div class="col-3">3</div>
    <div class="col-8 col-push-1">8</div>
  </div>

  <div class="row">
    <div class="col-3">3</div>
    <div class="col-8 col-offset-1">8</div>
  </div>

update: changed text above snippet slightly to avoid confusion

[mdo]

There is no difference in the grid between large and xlarge devices, so you wouldn't see a change there. See http://jsbin.com/efezub/1—notice the gap between the columns? That's what the offset does.

[fabiogiolito]

@mdo my point wasn't that there's no different between large and xlarge. It was that there's no difference between push and offset.

If you change .col-offset-1 to .col-push-1 on your example, what's the difference?

One of the things being discussed here is that offset and push do the same thing (in a different ways, but it's the same result), it's just duplication.

The other thing is that you have control over the grid in different viewports but not over the offset/push.

[mdo]

Ohh, I see what you mean now @fabiogiolito—totally misread that snippet as both having offset classes. Yeah, I think we can omit the offset classes and instead tell folks to use just a push class.

[chanced]

@mdo

@chanced How is the grid an overall mess? This adds the option to make the grid more complex, but you don't need to use them. Perhaps we haven't struck a solid balance yet though.

Re-reading my comment, I realized I came across snarkier than I intended. Commenting early is always a bad idea. Sorry about that.

But to clarify, it's hard not to go "oh god" when you first see something like this:

<div class="row">
   <div class="col-sm-6 col-lg-4 col-push-sm-6 col-push-lg-8">.....</div>
</div>

Having said that, introducing the ability to control the grid at various levels is a great addition. It's just that you are going to have to provide the same flexibility to all supporting features. Otherwise I think it's going to seriously confuse and/or frustrate people.

I really appreciate the fact that Bootstrap has introduced everyone, from regular developers to newbies to seasoned UX junkies, to a means of communicating about front-end development that didn't exist before. With a simple, yet full, framework, people could easily share ideas and reuse components which was desperately needed.

I'm afraid that at a certain complexity level, we are going to fall back into the same rhythm web development was in before. Sure, the flexibility and modularity may increase but I'm not so sure regular, "I don't do design," developers will continue to feel comfortable in it.

[eratzlaff]

@chanced My example are for complex use case. Most of the time you want to use only one case sm or lg because the sm class apply to lg to.
@mdo I only see use case for push pull and offset for sm and lg. But suggest add push pull and offset for tiny device only for completeness.

[mdo]

Gah, I see why I didn't want to remove offsets now—the push/pull classes are always anchored to the right or left most edge of the row, @fabiogiolito. See the following code for the difference:

<!-- Offsets are based on the edge OR grid column closest to them -->
<div class="row show-grid">
  <div class="col-lg-3 col-offset-3">3 offset 3</div>
  <div class="col-lg-3 col-offset-3">3 offset 3</div>
</div>

<!-- Pushes are based on the left-most edge of the entire grid row, not their nearest column -->
<div class="row show-grid">
  <div class="col-lg-3 col-push-3">3 push 3</div>
  <div class="col-lg-3 col-push-6">3 push 6</div>
</div>

Not a huge deal, but I think one that's at least confusing without a bit more explanation in the docs. The offsets make a lot of sense to me because of the easy math. Open to more thoughts on the matter though.

[mdo]

@chanced Agreed on that "Holy fucking classes, Batman!" initial reaction. It's tough and I want to avoid that. Perhaps more emphasis on mixin-ing those classes would help because you can go all semantic.gs with this new grid system quite easily.

[cvrebert]

Using an empty <div> with a grid width class has always sounded to me like a decent alternative to offset.

[fabiogiolito]

@mdo Ah, got it! Yeah, definitely easier to understand offset in this case.

@cvrebert That's pretty straight forward. The code won't look so good, but actually solves the lack of push/offset per-viewport (not the pull though…)

  <div class="row show-grid">
    <div class="col-sm-1 col-lg-3"></div>
    <div class="col-3 col-lg-3">1</div>
    <div class="col-9 col-sm-7 col-lg-3">2</div>
  </div>

[chanced]

Perhaps more emphasis on mixin-ing those classes would help because you can go all semantic.gs with this new grid system quite easily.

@mdo That's a great point. The changes you've put together for the grid and how it works in a responsive environment seem conducive to that approach. Bootstrap 2 was almost there but the responsive side of things kind of muddied the waters for mixins and I never got around to building out a solution for it like I had planned.

I think something minor as including the LESS files in the downloadable distribution could go a long way to encouraging usage of it.

[mdo]

This has been added.

[claviska]

I agree with @chanced on making the LESS files available in the downloadable distro—or at least having an option to include them in the download builder.

[maxymczech]

Hi there. Doc at http://getbootstrap.com/css/ section "Grid Options" right now says that .col-sm-* grid is "Collapsed to start, horizontal above breakpoints" - which is not exactly true, cause right now I had to do this to achieve desired effect (stacked on mobile, 6-6 otherwise):

<div class="row">
  <div class="col-sm-6 col-lg-6">...</div>
  <div class="col-sm-6 col-lg-6">...</div>
</div>

Sorry if I am wrong, I'm new to Bootstrap community :(

[claviska]

@dantistus Unless I'm misunderstanding, that's exactly how they're supposed to work.

[jlslew]

.col-sm-* has changed with commit db45a60.

[maxymczech]

@jlslew thank you
@claviska "horizontal above breakpoints" - this does not hold true after commit @jlslew pointed to. Doc should be updated accordingly. For .col-sm-* 768px is the breakpoint. 1024px is above 768px, but .col-sm-* would not be horizontal at 1024px.