Moving divs (vertically and horizontally) when resizing window using Bootstrap 4 - html

Question

CSS
.main{
border-radius: 20px;
margin-left: 20px;
margin-right: 20px
}
.left{
max-width: 250px;
height: 1%;
border-radius: 20px;
}
.right{
max-width: 250px;
height: 1%;
border-radius: 20px;
}
.parent-container {
display: flex;
}
HTML
<div class="parent-container">
<div class="container left">
<div class="row">
Left content
</div>
</div>
<div class="container card main py-3">
<div class="container card">
<div class="card-body">
<div class="row">
<div class="col-lg-12 text-center">
<h2>TITLE2</h2>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<a href="#" class="link1">
<img src="2.jpg">
<h3>Title3</h3>
</a>
</div>
</div>
</div>
</div>
<div class="container right">
<div class="row">
<div class="right-content">
Right content here
</div>
</div>
</div>
</div>
On full width my page layout looks like this:
[navbar]
[1][2][3]
I was told in my previous post to use the "order-last order-md-first" but that doesn't really help me because when I resize the window I get something like this:
[navbar]
[2][3][1]
And the effect I'm looking for is:
[navbar]
[2][3]
....[1]
(the [1] div just under the [3])
Is it in any way achievable? Thanks in advance.

Answer 1

To achieve the effect you are looking for, you need besides the order classes also the offset classes.
But first the columns:
col-lg-3 -- col-lg-6 -- col-lg-3 in the code below means that the sidebar columns take up 3 units on larger screens and the center column 6 units (12 in total).
On smaller screens (smaller than lg), the center column gets 8 units (col-8) and the right column gets 4 units (col-4), adding up to a total of 12 once again.
That's why the left column must also have col-4 and needs an offset of 8 units on smaller screens in order to position it directly underneath the right column on smaller screens.
That's why we need the following set of order and offset classes for the left column:
order-last order-lg-first offset-8 offset-lg-0
order-last is the default order for the left column i.e. that's the order for the smallest screens (Bootstrap 4 is "mobile-first", so the smallest screens come first)
order-lg-first says: "From large (lg) screens and up you come first."
offset-8 determines the default offset i.e. for the smallest screens
offset-lg-0 means that from the large (lg) screen size and up there shall be no offset (zero offset).
Here's the working code snippet:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="container mt-3">
<div class="row">
<div class="col-4 col-lg-3 order-last order-lg-first offset-8 offset-lg-0 bg-warning">
<h2>1</h2>
Left content <br>
Left content <br>
Left content <br>
</div>
<div class="col-8 col-lg-6 bg-primary">
<h2>2</h2>
Center <br>
Center <br>
Center <br>
</div>
<div class="col-4 col-lg-3 bg-secondary">
<h2>3</h2>
Right content <br>
Right content <br>
Right content <br>
</div>
</div>
</div>