Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Merge requests
  • !4695

Added "offset-left" class to grid

  • Review changes

  • Download
  • Email patches
  • Plain diff
Closed Administrator requested to merge github/fork/jfullerton/grid-reordering into master Aug 24, 2012
  • Overview 0
  • Commits 1
  • Pipelines 0
  • Changes 1

Created by: jfullerton

Added "offset-left" class to grid. This uses a negative left margin to shift grid-sized elements a number of grid-units to the left.

Works with both static and fluid grids and also when nested. When used alongside "offset" it allows for visually reordering grid-sized elements in desktop layouts.

This is useful in responsive layouts where you might want a certain content order for desktop widths and another for smaller device widths when grid-sized elements get reset to block level.

Example:

<div class="row">
    <div class="span8 offset4">Content</div>
    <div class="span4 offset-left12">Subnav</div>
</div>

On the desktop this will display in reversed order with the narrower Subnav column appearing on the left and the wider Content column appearing on the right. Then at a smaller device width, they both get set back to block level with the Content block appearing above the Subnav one.

Assignee
Assign to
Reviewers
Request review from
Time tracking
Source branch: github/fork/jfullerton/grid-reordering