Skip to content

Instantly share code, notes, and snippets.

@chriwo

chriwo/index.html

Created May 23, 2017 06:09
Show Gist options
  • Save chriwo/454462f09a864ec21e75d55a313971fd to your computer and use it in GitHub Desktop.
Save chriwo/454462f09a864ec21e75d55a313971fd to your computer and use it in GitHub Desktop.
Download ZIP
Bootstrap 3.x column ordering
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<p class="alert alert-success">
Position Aside:<br>
- Smartphone Top<br>
- Small Right<br>
- Medium Left<br>
- Large Left
</p>
</div>
</div>
<div class="row">
<aside class="col-xs-12 col-sm-4 col-sm-push-8 col-md-push-0">
<p class="alert alert-info visible-xs-block">visible aside xs</p>
<p class="alert alert-info visible-sm-block">visible aside sm</p>
<p class="alert alert-info visible-md-block">visible aside md</p>
<p class="alert alert-info visible-lg-block">visible aside lg</p>
</aside>
<content class="col-xs-12 col-sm-8 col-sm-pull-4 col-md-pull-0">
<p class="alert alert-info visible-xs-block">visible content xs</p>
<p class="alert alert-info visible-sm-block">visible content sm</p>
<p class="alert alert-info visible-md-block">visible content md</p>
<p class="alert alert-info visible-lg-block">visible content lg</p>
</content>
</div>
<hr>
<div class="row">
<div class="col-xs-12">
<p class="alert alert-success">
Position Aside:<br>
- All times left (top on smartphone)
</p>
</div>
</div>
<div class="row">
<aside class="col-xs-12 col-sm-4">
<p class="alert alert-info visible-xs-block">visible aside xs</p>
<p class="alert alert-info visible-sm-block">visible aside sm</p>
<p class="alert alert-info visible-md-block">visible aside md</p>
<p class="alert alert-info visible-lg-block">visible aside lg</p>
</aside>
<content class="col-xs-12 col-sm-8">
<p class="alert alert-info visible-xs-block">visible content xs</p>
<p class="alert alert-info visible-sm-block">visible content sm</p>
<p class="alert alert-info visible-md-block">visible content md</p>
<p class="alert alert-info visible-lg-block">visible content lg</p>
</content>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment