我想为中等尺寸的屏幕做以下布局
<div class="col-md-12">A</div>
<div class="col-md-12">B</div>
<div class="col-md-12">C</div>
[A-12]
[B-12]
[C-12]
我想为大屏幕做如下布局
<div class="col-lg-9>A</div>
<div class="col-lg-3>C</div>
<div class="col-lg-9>B</div>
[A-9][C-3]
[B-9]
我首先进行较小的屏幕设计(因为它应该首先是移动设备,对吗?)然后我尝试推/拉 B 和 C 以将 C 放在 A 旁边。但它不起作用。
<div class="col-md-12 col-lg-9">A</div>
<div class="col-md-12 col-lg-9 col-lg-push-3">B</div>
<div class="col-md-12 col-lg-3 col-lg-pull-9">C</div>
//Expected result
[A-9][C-3]
[B-9]
//Result I'm getting
[A-9]
[C-3][B-9]
那么,我应该如何布局才能获得预期的结果?
最佳答案
这是我想你想要的东西:
Bootstrap :http://www.bootply.com/zu6yDOeHwn
HTML:
<div class="container">
<div class="col-md-12 col-lg-9">
<div class="row">
<div class="col-md-12 ">A</div>
<div class="col-md-12">B</div>
</div>
</div>
<div class="col-md-12 col-lg-3">C</div>
</div>
关于css - 如何根据屏幕尺寸对列进行排序?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25854140/