Bootstrap Responsive Grid System

Question

I am making a section that contain some text but i need the text in the right half of the section and on the left there is a background image for the section, so i made col-md-4 for the unused half because i don't wanna hide the background image and col-md-8 to the text, how to hide the col-md-4 section on the small screen and let the col-md-8 cover the whole section? iam using bootstrap 5

the code:

 <.-- Bootstrap 4.1:x/Twitter Library --> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <!-- Body --> <div class="header-main row"> <div class="col-md-4"></div> <div class="col-md-8 text-center d-flex flex-column justify-content-center align-items center"> <h1 class="first-font">MOBI TECH</h1> <h2 class="second-font my-4">THE CHEAPEST PRICE<br>THE BEST QUALITY</h2> <a class="btn-light-outline first-font px-5 py-2 rounded-pill">SHOP NOW</a> </div> </div>

the output on desktop:

the output on phones:

Answer 1

To hide element on particluar screen breakpoint use .d-sm-none.d-md-block

 <.-- Bootstrap 4.1:x/Twitter Library --> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <.-- Body --> <div class="header-main row"> <div class="col-md-4 .d-sm-none .d-md-block"></div> <div class="col-md-8 col-sm-12 text-center d-flex flex-column justify-content-center align-items center"> <h1 class="first-font">MOBI TECH</h1> <h2 class="second-font my-4">THE CHEAPEST PRICE<br>THE BEST QUALITY</h2> <a class="btn-light-outline first-font px-5 py-2 rounded-pill">SHOP NOW</a> </div> </div>

this will leave layout as you defined for md screens and hide firs div and make second div 12 cols wide on sm screens.