title: How to hide 1 column in a row and show second column only from medium screen to small screen in bootstrap 5?
body: <p>So I am trying to achieve is that I have made a row and inside that row there are two columns first is a left_bar column and second column is large image so what I want is that when the screen hits medium breakpoint from medium to small screen I only have to show the large image i.e column 2 and not column 1 i.e the left_bar <br>
  I have also posting the required output from medium screen to small screen.<a href="https://i.stack.imgur.com/RfpwF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RfpwF.png" alt="enter image description here" /></a><br>
  I am also mentioning my code snippet</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
      margin: 0;
      padding: 0;
  }
  @media screen and (min-width: 300px) and (max-width: 500px){
  }
  @media screen and (min-width: 500px) and (max-width: 700px){
    
  }
  @media screen and (min-width: 700px) and (max-width: 900px){
  
  
  }
  @media screen and (min-width: 900px) and (max-width: 920px){
  }
      .left_bar{
          height: 100vh;
          background-color: #030C13;
          margin: 0;
      }
      .hero_image{
          width: 100%;
          height: 100vh;
          background-image: url('https://imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg');
          background-position: center;
          background-position: right;
          background-size: cover;
          background-repeat: no-repeat;
      }
      .img-thumbnail{
          border: none !important;
  
      } 
      .profile_pic {
          width: 150px;
          height: 150px;
          border-radius: 50%;
          margin-top: 3em;
          display: flex;
          justify-content: center;
          box-shadow: -1px 0px 0px 14px #262837
      }
      .name{
          display: flex;
          justify-content: center;
          margin-top: 1em;
          color: #FCFEFF;
      }
      .fb_div{
          position: relative;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          background-color: #1D212B;
          padding: 1.5em;
          margin-left: 1em;
      }
      .tw_div{
          position: relative;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          background-color: #1D212B;
          padding: 1.5em;
  
      }
      .lg_div{
          position: relative;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          background-color: #1D212B;
          padding: 1.5em;
          margin-left: 1em;
      }
      .fa-twitter {
          font-size: 20px;
          left: 16px;
          position: absolute;
          top: 15px;
          color: white;
          cursor: pointer;
      }
      .fa-facebook-f {
          font-size: 20px;
          left: 19px;
          position: absolute;
          top: 15px;
          color: white;
          cursor: pointer;
      }
      .tw_div:hover{
          background-color: white;
      }
      .tw_div:hover .fa-twitter{
          color:black ;
      }
      .fb_div:hover{
          background-color: white;
      }
      .fb_div:hover .fa-facebook-f{
          color: black;
      }
      .lg_div:hover{
          background-color: white;
      }
      .lg_div:hover .fa-instagram{
          color: black;
      }
      .fa-instagram {
          font-size: 24px;
          left: 15px;
          position: absolute;
          top: 12px;
          color: white;
          cursor: pointer;
      }
      .fa-skype{
          font-size: 24px;
          left: 15px;
          position: absolute;
          top: 12px;
          color: white;
          cursor: pointer;
      }
      .fa-linkedin-in{
          font-size: 24px;
          left: 15px;
          position: absolute;
          top: 12px;
          color: white;
          cursor: pointer;
      }
      .sky_div{
          position: relative;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          background-color: #1D212B;
          padding: 1.5em;
          margin-left: 1em;
      }
      .sky_div:hover{
          background-color:white ;
      }
      .sky_div:hover .fa-skype{
          color: black;
      }
      .ld_div{
          position: relative;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          background-color: #1D212B;
          padding: 1.5em;
          margin-left: 1em;
      }
      .ld_div:hover{
          background-color:white ;
      }
      .ld_div:hover .fa-linkedin-in{
          color: black;
      }
      .nav_tabs{
          display: flex;
      }
      .nav-link{
          color: #92959D ;
          margin-bottom: 1em
      }
      .nav-link:hover{
          color: white;
      }
      .fa-home{
          color: #377DB3;
          font-size:1.5em;
      }
      .fa-user{
          color: #5F656F;
          font-size:1.5em;
      }
      .nav-link:hover .fa-user{
          color: #377DB3;
      }
      .fa-file{
          color: #5F656F;
          font-size:1.5em;
      }
      .nav-link:hover .fa-file{
          color: #377DB3;
      }
      .nav-link:hover .fa-list-alt{
          color: #377DB3;
      }
      .fa-list-alt{
          color:#5F656F ;
          font-size:1.5em;
      }
      .nav-link:hover .fa-server{
          color: #377DB3;
          
      }
      .fa-server{
          color: #5F656F;
          font-size:1.5em;
      }
      .nav-link:hover .fa-envelope{
          color: #377DB3;
      }
      .fa-envelope{
          color: #5F656F;
          font-size:1.5em;
      }
      .nav-item a{
          margin-left: 1em;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;Assignment 8&lt;/title&gt;
      &lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container-fluid"&gt;
      &lt;div class="row"&gt;
          &lt;div class="d-lg-block col-lg-3 left_bar"&gt;
              &lt;img src="https://imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg" class="img-fluid profile_pic mx-auto" alt="..."&gt;
              &lt;h2 class="name"&gt;Alex Smith&lt;/h2&gt;
              &lt;div class="socials mt-lg-4 d-flex justify-content-center"&gt;
                  &lt;div class="tw_div"&gt;&lt;i class="fab fa-twitter"&gt;&lt;/i&gt;&lt;/div&gt;
                  &lt;div class="fb_div"&gt;&lt;i class="fab fa-facebook-f"&gt;&lt;/i&gt;&lt;/div&gt;
                  &lt;div class="lg_div"&gt;&lt;i class="fab fa-instagram"&gt;&lt;/i&gt;&lt;/div&gt;
                  &lt;div class="sky_div"&gt;&lt;i class="fab fa-skype"&gt;&lt;/i&gt;&lt;/div&gt;
                  &lt;div class="ld_div"&gt;&lt;i class="fab fa-linkedin-in"&gt;&lt;/i&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="nav_tabs"&gt;
              &lt;ul class="nav flex-column ms-lg-3 mt-lg-4 "&gt;
                  &lt;li class="nav-item"&gt;
                    &lt;a class="nav-link" aria-current="page" href="#"&gt;&lt;i class="fas fa-home"&gt;&lt;/i&gt;&lt;span class="ms-2"&gt;Home&lt;/span&gt; &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item"&gt;
                    &lt;a class="nav-link" href="#"&gt;&lt;i class="fas fa-user"&gt;&lt;/i&gt;&lt;span class="ms-2"&gt;  About&lt;/span&gt;&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item"&gt;
                    &lt;a class="nav-link" href="#"&gt;&lt;i class="fas fa-file"&gt;&lt;/i&gt;&lt;span class="ms-2"&gt;  Resume&lt;/span&gt;  &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link" href="#"&gt;&lt;i class="fas fa-list-alt"&gt;&lt;/i&gt;&lt;span class="ms-2"&gt;Portfolio&lt;/span&gt; &lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link" href="#"&gt;&lt;i class="fas fa-server"&gt;&lt;/i&gt;&lt;span class="ms-2"&gt;Services&lt;/span&gt; &lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link" href="#"&gt;&lt;i class="fas fa-envelope"&gt;&lt;/i&gt; &lt;span class="ms-2"&gt;Contact&lt;/span&gt;&lt;/a&gt;
                    &lt;/li&gt;
                       
                &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt; 
       &lt;div class="col-12 col-md-12 col-lg-9  hero_image"&gt;
  
       &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>