【发布时间】：2020-12-02 12:44:32
【问题描述】：
这可能已在其他地方得到回答，但我查看了大量其他帖子，除此之外我看不到直接相关的答案：
Bootstrap: move div from one column to another, order counts for mobile devices
这确实很有帮助，但它对我不起作用，我不确定我在做什么不同。
基本上，我已经完成了将列向右移动（使用将列“浮动”到右侧的媒体查询）并采用“移动优先”的方法来实现这一点.但是，问题是它（绿色的“技能”列）迫使我的另一列（红色的“角色机会”列）在“lg”视图中向下，我希望它占据当前正在创建的空间（黄色空白处）。
如果您查看下面的代码 sn-p，您会发现它在按照我希望它们在移动视图中的顺序堆叠它们方面做得很好，但它随后会创建一个空间（黄色部分）在“lg”视图中时，我希望红色部分直接位于灰色（bg-secondary）和绿松石（bg-info）部分的下方，无论绿色部分有多大。
请帮助并让我知道是否有更多信息可以提供以进一步澄清。
提前致谢
（在给回复者投票和回答标记后，我总是更新我的答案以显示我是如何实现我的代码的）
@media (min-width:1200px) {
.pull-lg-right {
float: right;
}
}<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"></link>
</head>
<body>
</br>
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 offset-lg-1 bg-primary">
<div>
<h1>Job Title</h1>
<h2>Job Category</h2>
</div>
<div>
<h2>Spec Roles</h2>
<ul>
<li>Example Spec Role</li>
<li>Example Spec Role</li>
<li>Example Spec Role</li>
</ul>
</div>
</div>
<div class="col-lg-7 bg-light">
<div class="row">
<div class="col-lg-12">
<h2>Job Requirements</h2>
</div>
</div>
<div class="row">
<div class="col-lg-9 bg-warning">
<div class="row">
<div class="col-lg-7 bg-secondary">
<h2>Qualifications</h2>
<h3>Apprenticeship</h3>
<ul>
<li>Example Qual</li>
</ul>
<h3>Alternative</h3>
<ul>
<li>Example Qual</li>
<li>Example Qual</li>
<li>Example Qual</li>
</ul>
</div>
<div class="col-lg-5 bg-info">
<h2>Training</h2>
<ul>
<li>Example Training</li>
<li>Example Training</li>
<li>Example Training</li>
<li>Example Training</li>
<li>Example Training</li>
<li>Example Training</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-3 pull-lg-right bg-success clearfix">
<h2>Skills</h2>
<ul>
<li>Example Skill</li>
<li>Example Skill</li>
<li>Example Skill</li>
<li>Example Skill</li>
<li>Example Skill</li>
<li>Example Skill</li>
<li>Example Skill</li>
<li>Example Skill</li>
<li>Example Skill</li>
<li>Example Skill</li>
<li>Example Skill</li>
<li>Example Skill</li>
<li>Example Skill</li>
<li>Example Skill</li>
<li>Example Skill</li>
<li>Example Skill</li>
<li>Example Skill</li>
<li>Example Skill</li>
<li>Example Skill</li>
</ul>
</div>
<div class="col-lg-9 bg-danger">
<div class="row">
<div class="col-12">
<h2>In Role Opportunities</h2>
<h3>Continuous Professional Development</h3>
<ul>
<li>Example CPD</li>
<li>Example CPD</li>
</ul>
<h3>Personal Development</h3>
<ul>
<li>Example PDO</li>
<li>Example PDO</li>
<li>Example PDO</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>【问题讨论】：
标签： html css bootstrap-4 floating col