Bootstrap 4 column ordering with WHMCS Template

So, I'm rebuilding my website's theme which is powered by WHMCS. I'm doing it using bootstrap 4. Using BS4, I'm trying to figure out how to do the column ordering in the client area (just like the default "six" template does (which uses BS3)), but not having much luck. It should go something like this - On desktop view the Primary and Secondary navs should sit on the left side, with the main content to the right, and on mobile view the primary nav shrinks and sits above the content, with the secondary nav after the content:

Desktop View:

PN | MC
SN |


Mobile View:

PN
MC
SN


Here is the basic layout html:

<div class="container">
<main class="row">
<aside class="col-sm-3">
BS4 Card containing Primary Navigation
</aside>
<article class="col-sm-9">
Main client area content
</article>
<aside class="col-sm-3">
BS4 Card containing Secondary Nav
</aside>
</main>
</div>


I cannot figure out how to get the secondary nav to sit on the left below the primary nav when in desktop view, rather it's sitting to the left below the main content. In BS3, this was done simply by using a left float, but since BS4 uses flex-boxes, that no longer works.

Edit:
Here are some fiddles so you can see whats happening:

Note: Removed images because the fiddles show exactly the same thing.

3 Answers
3

You have been using bootstrap grid incorrectly. Sum of all col should be 12.
I have posted the working code that you need:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<main class="row">
<div class="col-lg-3 col-ms-3 col-sm-3 col-xs-3">
<div class="row">
<aside class="col">
BS4 Card containing Primary Navigation
</aside>
</div>
<div class="row">
<aside class="col">
BS4 Card containing Secondary Nav
</aside>
</div>
</div>
<div class="col-lg-9 col-ms-9 col-sm-9 col-xs-9">
<article class="col">
Main client area content
</article>
</d

For the mobile view, add a media query which makes secondary nav position:fixed.

position:fixed

Here's a quick solution:
Add a class 'adjust' (or any name you wish) to the third column.

<div class="container">
<div class="row">
<div class="col-sm-3">
nav
</div>
<div class="col-sm-9">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque temporibus dolorum ea natus nam labore delectus vel, voluptatibus libero eligendi fuga optio! Nisi nemo architecto est, tenetur hic nesciunt distinctio totam repellat necessitatibus. Explicabo nam illum incidunt iusto recusandae nobis eos inventore dolore, suscipit cum earum numquam alias eveniet voluptatem!
</div>
</div>
<div class="row">
<div class="col-sm-3 adjust">
nav2
</div>
</div>
</div>


CSS:

.adjust{
position:relative;
bottom: 100px; /* whatever adjustment you wish */

}

@media(max-width:768px){
.adjust{
position:relative;
top: 100px; /* whatever adjustment required to push it back down */
}

}


I found a working solution to this. I was hoping to keep the flexbox structure on the elements and position the appropriately using the flexbox, but the following solution works and will do for now.

First, convert the containing .row plus the inner .col-sm-* items to block level items using BS4's display utilities by adding .d-lg-block to all 4 elements.
Next, use the float utilities to pull each column appropriately. In this case, adding .float-lg-left to the first and third columns (the navigation columns), and .float-lg-right to the middle column (the main content).

.row

.col-sm-*

.d-lg-block

.float-lg-left

.float-lg-right

Here's a fiddle of it working in BS4: https://www.bootply.com/0TrQZNXF1S

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.