Pull left and Pull right
Description
Classes such as col-xs-pull-*
and col-xs-push-* are used to move a column towards
the left and right respectively by a certain number of columns.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head><!--from w w w . ja v a2 s.c om-->
<body>
<div class="row">
<div class="col-xs-9 col-xs-push-3">
<h1>col-xs-push-3</h1>
</div>
<div class="col-xs-3 col-xs-pull-9">
<h1>col-xs-pull-9</h1>
</div>
</div>
</body>
</html>
Note
In the code, col-xs-9 column is pushed by three columns so it has moved
towards the right. The col-xs-3 column is also pulled by nine columns
towards the left. They appear as if they have swapped their
original position when viewed on a browser.
There are several variants of push and pull classes as per the screen size:
- col-xs-pull-* and col-xs-push-* for extra smaller screens
- col-sm-pull-* and col-sm-push-* for smaller screens
- col-md-pull-* and col-md-push-* for medium screens
- col-lg-pull-* and col-lg-push-* for larger screens
You can replace * with an integer between one and 12.