Column overlapping on first page load only - html

Question

Hi I am using Bootstrap 4, I am working on a project here http://eatout.sanaalitech.com/products.php I am facing a very strange problem.I am using bootstrap grid and my columns overlaps on the first page load only on mobile view,on desktop it works fine, when I refresh the page it works fine on the mobile as well.
I have tried the following but still not working
1) .col-lg-3{ display:block; position:relative;}
2) I have tried enclosing every 4 products in a row instead of taking all of them in a single row like this
content here
content here
content here
content here
content here
content here
content here
content here
content here
content here
content here
content here
3) I have also completely deleted this and made it again with cards but they also overlap on the first load only on mobile view.
Problem appears on the first load only.
I have added image on first page load .
<div class="container" style="margin-top:5em;">
<div class="row ">
<div class="col-lg-12" >
<ul class="filter-tabs text-center">
<li data-filter=".maincourse"><a href="#!" >Main Courses</a></li>
<li data-filter=".desserts">Desserts</li>
<li class="active" data-filter="*">View All</li>
<li data-filter=".starters">Starters</li>
<li data-filter=".extras">Extras</li>
</ul>
<div class="projects">
<div class="row">
<div class="col-lg-3 item maincourse mb-3" >
<div class="product ">
<img src="Images/banner-image4.jpg" class="img-fluid">
<div class="text-center mb-3 mt-3">
<h4>Meal Platter</h4>
<h7>£8.99</h7>
</div>
</div>
</div>
<div class="col-lg-3 item desserts mb-3" >
<div class="product ">
<img src="Images/dessert.jpg" class="img-fluid">
<div class="text-center mb-3 mt-3">
<h4>Meal Platter</h4>
<h7>£8.99</h7>
</div>
</div>
</div>
<div class="col-lg-3 item maincourse mb-3">
<div class="product ">
<img src="Images/main-meal-5.jpg" class="img-fluid img-filter">
<div class="text-center mb-3 mt-3">
<h4>Meal Platter</h4>
<h7>£8.99</h7>
</div>
</div>
</div>
<div class="col-lg-3 item starters mb-3">
<div class="product ">
<img src="Images/banner-image3.jpg" class="img-fluid">
<div class="text-center mb-3 mt-3">
<h4>Meal Platter</h4>
<h7>£8.99</h7>
</div>
</div>
</div>
<div class="col-lg-3 item maincourse mb-3">
<div class="product ">
<img src="Images/main-meal-2.jpg" class="img-fluid">
<div class="text-center mb-3 mt-3">
<h4>Roll Platter</h4>
<h7>£8.99</h7>
</div>
</div>
</div>
<div class="col-lg-3 item starters mb-3">
<div class="product ">
<img src="Images/main-meal-4.jpg" class="img-fluid">
<div class="text-center mb-3 mt-3">
<h4>Vege Starter</h4>
<h7>£7.99</h7>
</div>
</div>
</div>
<div class="col-lg-3 item desserts mb-3">
<div class="product ">
<img src="Images/dessert-2.jpg" class="img-fluid img-filter">
<div class="text-center mb-3 mt-3">
<h4>Rasberry cake</h4>
<h7>£4.99</h7>
</div>
</div>
</div>
<div class="col-lg-3 item maincourse mb-3">
<div class="product ">
<img src="Images/main-meal-3.jpg" class="img-fluid">
<div class="text-center mb-3 mt-3">
<h4>Burger Meal</h4>
<h7>£8.99</h7>
</div>
</div>
</div>
<div class="col-lg-3 item extras mb-3">
<div class="product">
<img src="Images/extras-1.jpg" class="img-fluid">
<div class="text-center mb-3 mt-3">
<h4>Macaroni Sallad</h4>
<h7>£7.99</h7>
</div>
</div>
</div>
<div class="col-lg-3 item maincourse mb-3">
<div class="product ">
<img src="Images/main-meal-6.jpg" class="img-fluid">
<div class="text-center mb-3 mt-3">
<h4>Fish & Beans</h4>
<h7>£12.99</h7>
</div>
</div>
</div>
<div class="col-lg-3 item extras mb-3">
<div class="product ">
<img src="Images/extras-2.jpg" class="img-fluid img-filter">
<div class="text-center mb-3 mt-3">
<h4>Avacado Sallad</h4>
<h7>£9.99</h7>
</div>
</div>
</div>
<div class="col-lg-3 item desserts mb-3">
<div class="product">
<img src="Images/dessert-3.jpg" class="img-fluid">
<div class="text-center mb-3 mt-3">
<h4>Chocolate Cake</h4>
<h7>£7.99</h7>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

When your grid overflows, run this in the console.
(Code from javascript.js at line 217)
var $projects = $(".projects");
$projects.isotope({
itemSelector: ".item",
layoutMode:'fitRows'
});
I think that this function runs before everything loads.
I don't know what is going on because sometimes this fixes the issue once called but most of the time it does not. But one is for sure. A function defines the absolute position, so the issue lays somewhere within the javascript source.