This may have been answered else where, but I've looked at loads of other posts and I can't see a directly related answer other than this:
Bootstrap: move div from one column to another, order counts for mobile devices
This has been really helpfull but it isn't working for me and I'm not sure what I'm doing differently.
Basically, I have got it to do what I want in terms of moving a column to the right (using a media query that "floats" the column to the right) and have adopted the "mobile first" approach to acheive this. However, the problem is that it (the Green "Skills" column) is forcing my other column (the Red "In Role Opportunities" column) down in the "lg" view where I want it to occupy the space that is currently being created (the Yellow empty space).
If you have a look at the code snippet below, you'll see that it is doing a great job of stacking them in the order I want them to when in mobile view but it then creates a space (the yellow section) when in "lg" view and I want the red section to be directly below the grey (bg-secondary) and turquoise (bg-info) sections regardless of how big the green section gets.
Please help and let me know if there is any more info I can give for further clarity.
Thanks in advance
(I always update my answer to show how I implemented my code after I have given the replier a vote and answer mark)
@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>
