所以这完全有效(在小屏幕上从4列到2列):
<div class="row"> <div class="col-lg-3 col-sm-6"> 1</div> <div class="col-lg-3 col-sm-6"> 2</div> <div class="col-lg-3 col-sm-6"> 3</div> <div class="col-lg-3 col-sm-6"> 4</div> </div>
和我的3列一样,但是中间的列堆叠在第三列的顶部(然后是右列/第二列).
<div class="row" id="footer"> <div class="col-lg-3 col-sm-6"> 1 </div> <div class="col-lg-3 col-sm-6"> 2 </div> <div class="col-lg-6 col-sm-6"> 3 </div> </div>
如何告诉中间列堆叠在第一列的上方或下方?例如,col-sm-pull-6不起作用.
期望的结果:
1 - 3 2 - ..
切换2和3然后使用推拉的问题是第2列仍然是第3列的顶部.而且我需要它们就像我想要的结果’图表’.
编辑:我能做的是给第一列col-sm-12.这将推动其他2下来.这样顺序是好的,因为它是一个页脚,段落列完全底部的事实也不错.但我仍然愿意接受更好的建议.
网格现在看起来像这样:
1 2 - 3
解决方法
所以这里,
首先,你应该在大屏幕之前使用较小屏幕的设计,如下所示:
<div class="col-sm-6 col-lg-3"> (...)
现在,为了您的设计,您需要这样:
<div class="col-sm-6 col-lg-3"> 1 </div> <div class="col-sm-6 col-lg-3 col-lg-push-3"> 3 </div> <div class="col-sm-6 col-lg-3 col-lg-pull-3"> 2 </div>
…我做的是我用第3列颠倒了第2列,以便它们适合我对小屏幕的需求,然后通过使用推拉来调整大屏幕.
编辑:这是一个工作小提琴:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。