htmlcssbootstrap-5

how can i move a row in bootstrap@5.3

I want to make my html look like below.

In size +991, it should be as below

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/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

Solution

  • 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/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/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.