首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Bootstrap 3:仅在较小屏幕尺寸上推送/拉入列

Bootstrap 3:仅在较小屏幕尺寸上推送/拉入列
EN

Stack Overflow用户
提问于 2014-02-21 19:48:57
回答 2查看 92.2K关注 0票数 59

我在一个页面上有以下布局:

代码语言:javascript
运行
复制
<div class="col-lg-3">1</div>
<div class="col-lg-2">2</div>
<div class="col-lg-2">3</div>
<div class="col-lg-2">4</div>
<div class="col-lg-3">5</div>

 --------- ----- ----- ----- ---------
|    1    |  2  |  3  |  4  |    5    |
 --------- ----- ----- ----- ---------

但在较小的屏幕尺寸上,我想要以下布局:

代码语言:javascript
运行
复制
<div class="col-xs-6">1</div>
<div class="col-xs-6">5</div>
<div class="col-xs-4">2</div>
<div class="col-xs-4">3</div>
<div class="col-xs-4">4</div>

 ----------------- -----------------
|        1        |        5        |
 ----------------- -----------------
|     2     |     3     |     4     |
 ----------- ----------- -----------

(请注意列顺序的重新排列。)是否可以仅在较小的屏幕尺寸上推送/拉取列?我尝试了以下方法,但我得到了最奇怪的布局,并且似乎完全失去了<div>5</div> ...:

代码语言:javascript
运行
复制
<div class="col-lg-3 col-xs-6">1</div>
<div class="col-lg-2 col-xs-4 col-xs-push-4">2</div>
<div class="col-lg-2 col-xs-4>3</div>
<div class="col-lg-2 col-xs-4>4</div>
<div class="col-lg-3 col-xs-6 col-xs-pull-12">5</div>
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/21933664

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档