我一直在这一整天的工作，但不提出一个解决方案。我在容器中的一行中有3列。
1：正确的内容 – 拉右
2：导航 – 拉左
3：主要内容
它在大屏幕上看起来：
------------------------------------------------ | Menu | Content | Right Content | ------------------------------------------------
在较小的屏幕上应该是什么样子：
---------------------------- | Menu | Right Content | | |------------------ | | Content | ----------------------------
现在的样子：
------------------ | Right Content | ------------------ | Menu | Content | ------------------
我认为这只是一个简单的浮动问题。但我试过几乎所有的可能性。
解决方法
引导3
使用Bootstrap 3的网格系统：
<div class="container">
<div class="row">
<div class="col-xs-4">Menu</div>
<div class="col-xs-8">
<div class="row">
<div class="col-md-4 col-md-push-8">Right Content</div>
<div class="col-md-8 col-md-pull-4">Content</div>
</div>
</div>
</div>
</div>
说明
首先，我们设置两个列，将保持在原地，无论屏幕分辨率(col-xs- *)。
接下来，我们将较大的右侧列分成两个列，这两个列将在平板电脑尺寸的设备上相互叠加，并降低(col-md- *)。
最后，我们使用匹配类(col-md- [push | pull] – *)来移动显示顺序。你推第一列超过第二个的数量，并拉第二个数量的第一个。
原文地址：https://www.jb51.cc/css/222029.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
