三列Bootstrap布局，左侧边栏位于底部

Question

我正在尝试使用Bootstrap 3实现三列布局。我希望页面在桌面上显示为图像的左侧部分，而在移动设备时则显示在右侧图像上。 / p>

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

任何帮助？

Answer 1

您可以将div保留为第一个容器，然后使用旁白，然后使用col-lg-push-*和col-lg-pull-*打开更大的设备。 Source here

演示 [点击整个代码段以测试更大的设备]

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这个

<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>

希望它有所帮助。

Answer 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