Position containers and text with these available classes.


Use float classes at different breakpoints to position content. Use responsive clear classes in combination if needed.

Responsive Float Classes
Class Name Breakpoint Direction
.pull-left, .pull-left-xs extra small left
.pull-left-sm small left
.pull-left-md medium left
.pull-left-lg large left
.center-block, .center-block-xs extra small center
.center-block-sm small center
.center-block-md medium center
.center-block-lg large center
.pull-right, .pull-right-xs extra small right
.pull-right-sm small right
.pull-right-md medium right
.pull-right-lg large right

Clear Floats

Use the .clearfix class to clear floats. There are also margin and padding clears available.

Column Ordering with Bootstrap Grid

Use column ordering to reorder Bootsrap grid columns at different viewport sizes


Easily change the order of our built-in grid columns with push and pull modifier classes. Push classes move columns to the right. Pull classes move columns to the left. Replace the number symbol with the number of places you wish to move the column.

Code your content mobile first. It is easier to push and pull columns on larger devices than it is on smaller devices.

Column Ordering Classes
Class Name Viewport Size Push or Pull
.col-xs-push-# Extra Small Push
.col-xs-pull-# Extra Small Pull
.col-sm-push-# Small Push
.col-sm-pull-# Small Pull
.col-md-push-# Medium Push
.col-md-pull-# Medium Pull
.col-lg-push-# Large Push
.col-lg-pull-# Large Pull


Swap Left and Right Columns  Code

In this example, the image stacks above the description by default. At the medium viewport size, the columns are horizontal and push/pull classes swap their positions.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et elementum elit, sit amet aliquet magna. Etiam augue nisi, ornare at interdum a, vulputate sed nunc. Duis sed quam consequat, rhoncus est ut, sodales odio.

More Examples  Code

These examples are laid out in order by default and reordered at the medium breakpoint.