-1

I using Grid Bootstrap

enter image description here

when I switch back to my Mobile screen I want enter image description here

I tried many ways but still can't solve. Thanks for reading!

use bootstrap grid and have corresponding response

lethetai
  • 1
  • 3
  • Can you please add a [minimal reproductible example](https://stackoverflow.com/help/minimal-reproducible-example) ? – Cédric Nov 07 '22 at 10:06

2 Answers2

0

EDIT : better solution

NOTE: bootstrap not support responsive sizing (height and width or flex-base) it means you can't do it with bootstrap only you need add some pure css in your code to add new class like h-lg-100

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css">
</head>
<style>
  @media (min-width:768px) {
    .h-lg-100 {
      height: 100%!important;
    }
  }
</style>

<body class="vh-100">
  <div class="d-flex flex-wrap vh-100 flex-lg-row flex-column text-white w-100 text-center fs-1 ">
    <div class="bg-black d-block  h-lg-100 h-50 col-lg-4   order-lg-1 ">1</div>
    <div class="bg-warning d-block h-100 col-lg-4   order-3 order-lg-2">2</div>
    <div class="bg-danger  d-block h-lg-100 h-50  col-lg-4   order-lg-3 ">3</div>
  </div>

</body>
</body>
dante velli
  • 369
  • 1
  • 13
-1

HTML code:

<div class="container">
      <div class="row">
        <div class="col-md-3 col-6" id="col1">
          <h2>1</h2>
        </div>

        <div class="col-md-3 col-6" id="col2">
        <h2>2</h2>
        </div>

        <div class="col-md-3 col-6" id="col3">
          <h2>3</h2>
        </div>
      </div>
    </div>

CSS styles:

@media only screen and (max-width: 768px) {

  #col2 {
    position: absolute;
    height: 100%;
    top: 0;
    right: 0;
  }

  #col1, #col3 {
    margin-right: 50%;
  }

  .row {
    position: relative;
  }
}
Vladimir
  • 115
  • 1
  • 5