Grid breakpoints are determined by the minimum width media queries, which means
they only apply to that specific breakpoint and all larger ones (e.g., .col-sm-4 applies to small, medium, large, and extra-large devices,
but not the initial xs breakpoint)
To achieve the desired layout for each screen size, you can combine different classes.
UPDATE: I have modified the code snippet and included a complete code example that produces the intended outcome-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row bg-danger" style = "height:200px;">
<div class="col-md-0 col-lg-2"></div> <!--This will leave correct space on the sides of screen according to screen size-->
<div class="col-md-12 col-lg-8 bg-success text-center" style = "top:50px;height:50px;">
Your box
</div> <!--Consider this div to be your box-->
</div>
</body>
</html>
The provided code snippet will adjust the size of the div as follows -
- 8 grids for large desktop screens (screens with a width equal to or greater than 1200px)
- For medium-sized screens (laptops with a width equal to or greater than 992px), it assigns 12 grids to the div.
You can mix and match grid classes in a similar way to cater to various screen sizes and achieve the desired layouts.
I trust this resolves your query!