Custom and Responsive Grid Width at Bootstrap 4

My code is below:

<html>

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

  <style>
    .col-lg-3.custom {
      flex: 0 0 20%;
      max-width: 20%;
    }
    
    .col-lg-6.custom {
      flex: 0 0 55%;
      max-width: 55%;
    }
  </style>
</head>

<body>

  <div class="row">
    <div class="col-lg-3 custom" style="background: red;">1</div>
    <div class="col-lg-6 custom" style="background: rgb(0, 255, 255);">2</div>
    <div class="col-lg-3" style="background: green;">3</div>
  </div>

</body>

</html>

What I want here is making first column a bit smaller. col-lg-3 is too wide and col-lg-2 is too narrow for first column. For that reason I added custom styles. It works for wide screens actually.

But in mobile, it lose its responsiveness and becomes as below picture.

I want to make it as below at mobile:

Note: I found some questions for this problem, but I guess answers are for Bootstrap 3 because they didn't work for me.

Solution

Can you please check the below code? Hope it will work for you. If you want 100% width of all blocks on a mobile device you can apply the media query for the same.

Please refer to this link: https://jsfiddle.net/yudizsolutions/apf0hrn7/

 .col-md-3.custom {
   flex: 0 0 20%;
   max-width: 20%;
 }

 .col-md-6.custom {
   flex: 0 0 55%;
   max-width: 55%;
 }

 @media (max-width:767px) {
   .col-12.custom {
     max-width: 100%;
     flex: 0 0 100%;
   }
 }

<html>

  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

  </head>

  <body>

    <div class="row">
      <div class="col-md-3 custom col-12" style="background: red;">1</div>
      <div class="col-md-6 custom col-12" style="background: rgb(0, 255, 255);">2</div>
      <div class="col-md-3" style="background: green;">3</div>
    </div>


  </body>

</html>