I want to make my html look like below.
In size +991, it should be as below
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous">enter image description here</script>
<div class="row">
<div class="bg-info col-6 col-lg-3">item 1</div>
<div class="bg-warning col-12 col-lg-6">item 2</div>
<div class="bg-primary col-6 col-lg-3">item 3</div>
</div>
I want item A and C in the first row with col-6 and item B below them with col-12
output like this
In size -991, it should be as below
Erfan irandoust is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
You can reorder the columns using: Order classes
This is not as easy as it seems. The trick here is to start with the third column “physically” in the second place, and then only move it to the third place once the large grid tier has been reached.
Here is an example:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous">enter image description here</script>
<div class="row">
<div class="bg-info col-6 col-lg-3">item 1</div>
<div class="bg-primary col-6 col-lg-3 order-lg-3">item 3</div>
<div class="bg-warning col-12 col-lg-6">item 2</div>
</div>This approach was probably taken because they assume you: “design for mobile first”. Many of us will nevertheless still be working on normal desktop UI’s because mobile devices are just not practical for business applications.