CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
marcelo2605
marcelo2605

Reputation: 2794

Put aside down the content

I'm using the following markup in my main content area:

<div class="row">
  <aside class="col-md-3 sidebar col-sm-3 col-xs-12">
      content
  </aside>
  <div class="col-md-9 col-sm-9 col-xs-12">
      content
  </div>
</div>

But in extra small devices, I would like to put aside bellow the main div. I try to use push and pull but the div moves to the right.

Upvotes: 1

Views: 232

Answers (1)

DavidG
DavidG

Reputation: 118957

If you start with the aside underneath, then at larger sizes, the push/pull classes will reverse the order. Like this:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<div class="row">
  <div class="col-md-9 col-sm-9 col-xs-12 col-sm-push-3">
  DIVcontent
  </div>
  <aside class="col-md-3 sidebar col-sm-3 col-xs-12 col-sm-pull-9">
  ASIDEcontent
  </aside>
</div>

Upvotes: 4

Related Questions