Three column Bootstrap layout with left sidebar at bottom

问题

I'm trying to achieve a three-column layout with Bootstrap 3. I want the page to appear like on left part of the image while on a desktop and like on the image to the right when on mobile.

<aside class="left col-md-2"></aside>   
<div class="left col-md-7"></div>
<aside class="left col-md-3"></aside>

Any help?

回答1:

You can keep the div as your first container followed by the asides and then use col-lg-push-* and col-lg-pull-* to switch on larger device. Source here

Demo [Click on Full Page of the snippet to test for larger device]

div,aside { height: 50px}
.content { background: lightpink;}
.side1 { background: lightblue;}
.side2 { background: lightgreen;}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />

<div class="container">
  <div class="content left col-md-7 col-lg-push-2"></div>
  <aside class="side1 left col-md-2 col-lg-pull-7"></aside>
  <aside class="side2 left col-md-3"></aside>
</div>

回答2:

Try this

<div class="col-xs-12 visible-xs">Middle Column</div>

<div class="col-lg-2 col-xs-12">Left column</div>
<div class="col-lg-8 hidden-xs">Middle column</div>
<div class="col-lg-2 col-xs-12">Right column</div>

Hope it helps.

回答3:

HTML

<div class="row">
  <div id="col1" class="col-md-4">col-md-1</div>
  <div id="col2" class="col-md-4">col-md-2</div>
  <div id="col3" class="col-md-4">col-md-3</div>
</div>

CSS

#col1 {background-color: blue;}
#col2 {background-color: purple;}
#col3 {background-color: green;}

#col1 {display:table-footer-group;}
#col2 {display:table-header-group;}
#col3 {display:table;}

Fiddle

来源：https://stackoverflow.com/questions/29081657/three-column-bootstrap-layout-with-left-sidebar-at-bottom

标签

css3

twitter-bootstrap

twitter-bootstrap-3