我有 3 个 div,我想以特殊方式在桌面上排列。
3 个 div 是:
- 注册
- 新职位
- 新闻
在移动设备中应该像这样相互堆叠:
signup
new post
news
但在桌面上应该是这样的:
[news - 8 size] [signup - 4 size]
[new post - 4 size]
我使用了 bootstrap 推拉功能,但仍然找不到神奇的解决方案。
最佳答案
像这样? https://jsfiddle.net/xu47j54f/
有很多方法可以做到这一点......
您可以在第二列中使用嵌套行,如下所示:
<div class="container">
<div class="row">
<div class="col-sm-6">
Column 1
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-xs-12">
Column 2 - Row 1
</div>
<div class="col-xs-12">
Column 2 - Row 2
</div>
</div>
</div>
</div>
</div>
编辑 - 根据下面的评论,结合推和拉应该可以为您提供所需的移动尺寸行排序输出:https://jsfiddle.net/xu47j54f/1/
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-push-6">
<div class="row">
<div class="col-xs-12">
Column 2 - Row 1
</div>
<div class="col-xs-12">
Column 2 - Row 2
</div>
</div>
</div>
<div class="col-sm-6 col-sm-pull-6">
Column 1
</div>
</div>
</div>
关于html - Bootstrap 列排序网格移动桌面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37746287/