title: Bootsrap4 :How to make page to run in responsive
body: <p>I am creating a design page in left side there is 2 box and in right it is 3 box.
  It's working fine on desktop, now i wanted the box should be show single on mobile devices but unable to figure out.
  Following is the my code :</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en-US"&gt;
  &lt;head&gt;
      &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"&gt;
  
  &lt;style&gt;
  /* div partition */
  #homecategory {    clear: both;     padding: 0 10px;    max-width: 1230px;    margin: 0 auto;}
  .category {    position: relative;    margin-bottom: 20px;}
  .left-image {    float: left;    width: 49%;    margin-right: 1%;}
  .right-image {    float: left;    width: 49%;    margin-left: 1%;}
  
  
  /* animation start here */
  .cf:before,.cf:after{  display: table;  content: " ";}
  .cf:after{  clear: both}
  
  .catnamediv {   position: absolute; top: 35%;   width: 100%;    text-align: center; color: #fff;    text-transform: uppercase;  font-size: 25px;    z-index: 99;    font-weight: bold;  }
  
   .catnamediv a {    display: none;    width: 180px;    margin: 30px auto;    background: #297fca;    color: #fff;    font-size: 20px;    padding: 10px 0;   text-decoration: none;}
  
  .fancy-card:hover .shopnow{   display: block;}
  
  /*fancy card styling*/
  
  .fancy-card{  background: #eee;  width: 100%;  display: block;  float: left;  position: relative;  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);  transition: all 250ms ease-in; min-height:288px;  background-size: cover;  background-position: center center;  margin-bottom: 30px;  }
  
  .fancy-card .bg-overlay{    background: rgba(0,0,0,0.25);    position: absolute;    top: 0px;    left: 0px;
      width: 100%;    height: 100%;    transition: all 200ms linear;}
  
  .category :hover p {    border-bottom: 1px solid #fff;    display: inline; padding-bottom: 12px;}
  
  /*horizontal border elements (top &amp; bottom)*/
  
  .fancy-card .v-border{  position: absolute;  top: 0%;  left: 0%;  width: 100%;  height: 100%;   }
  .fancy-card .v-border:before,.fancy-card .v-border:after{  width: 0%;  height: 1px;  left: 50%;  transition: all 250ms ease-out;  background: #fff; }
  .fancy-card .v-border:before{  content: '';  top: 3%;  position: absolute;}
  .fancy-card .v-border:after{  content: '';  bottom:3%;  position: absolute;}
  
  /*horizontal elements (left &amp; right)*/
  .fancy-card .h-border{  position: absolute;  top: 0%;  left: 0%;  width: 100%;  height: 100%;}
  .fancy-card .h-border:before,.fancy-card .h-border:after{  height: 0%;  top: 50%;  width: 1px;
    transition: all 250ms ease-out;  background: #fff;}
  .fancy-card .h-border:before{  content: '';  left: 3%;  height: 0%;  position: absolute;    }
  .fancy-card .h-border:after{  content: '';  right:3%;  position: absolute;  }
  
  
  /*hover states for interactivity*/
  
  .fancy-card:active .v-border:before,.fancy-card:active .v-border:after,.fancy-card:hover .v-border:before,
  .fancy-card:hover .v-border:after{  width: 94%;  left: 3%;  }
  .fancy-card:active .h-border:before,.fancy-card:active .h-border:after,.fancy-card:hover .h-border:before,
  .fancy-card:hover .h-border:after{  height: 94%;  top: 3%;  }
  
  /*hovering over card, adjust background overlay*/
  
  .fancy-card:active .bg-overlay,.fancy-card:hover .bg-overlay{  background: rgba(0,0,0,0.45);    }
  
  /*medium and large profiles*/
  @media screen and (min-width: 768px){ 
    .fancy-card{    width: 30%;    margin: 0% 1.66% 3.33% 1.66%;  }  
  }
  /* title decorate */
  .cattilewrap {    text-align: center;    padding: 20px 0;    text-transform: uppercase;    position: relative;
      background: #fff;    z-index: -1;margin-top: 2%;}
  .catdnamediv2 {    font-size: 30px;    font-weight: 500;    background: #fff;}
  .catdnamediv2 span {  display: inline-block;  position: relative;  }
  .catdnamediv2 span:before,.catdnamediv2 span:after {  content: "";  position: absolute;  height: 5px;
    border-bottom: 1px solid #0088cc;  border-top: 1px solid #0088cc;  top: 0;  width: 100%;}
  .catdnamediv2 span:before {  right: 100%;  margin-right: 15px;}
  .catdnamediv2 span:after {  left: 100%;  margin-left: 15px;}
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="homecategory" class="home-category "&gt;      
          &lt;div class="cattilewrap"&gt;
              &lt;div class="col-12 d-flex justify-content-center catdnamediv1"&gt;Shop By&lt;/div&gt;
              &lt;div class="col-12 d-flex justify-content-center catdnamediv2"&gt;&lt;span&gt;Category&lt;/span&gt;&lt;/div&gt;
           &lt;/div&gt;
          &lt;div class="row cf "&gt;
  
              &lt;div class="col-md-6"&gt;
              &lt;div class=" left-image" &gt;
                  &lt;div class="category cat01 fancy-card" style=" background-image:url('_2.jpg');width:593px;height:436px;"&gt;       
                      &lt;div class="bg-overlay"&gt;&lt;/div&gt;
                      &lt;div class="v-border"&gt;&lt;/div&gt;
                      &lt;div class="h-border"&gt;&lt;/div&gt;    
                      &lt;div class="catnamediv"&gt;
                          &lt;p&gt;sectional sofa&lt;/p&gt;
                          &lt;a class="shopnow" href="#"&gt;shop now&lt;/a&gt;
                      &lt;/div&gt;      
                  &lt;/div&gt;
                  &lt;div class="category cat02 fancy-card" style=" background-image:url('_3.jpg');width:593px;height:436px;"&gt;                   
                      &lt;div class="bg-overlay"&gt;&lt;/div&gt;
                      &lt;div class="v-border"&gt;&lt;/div&gt;
                      &lt;div class="h-border"&gt;&lt;/div&gt;    
                      &lt;div class="catnamediv"&gt;
                          &lt;p&gt;sectional sofa&lt;/p&gt;
                          &lt;a class="shopnow" href="#"&gt;shop now&lt;/a&gt;
                      &lt;/div&gt;  
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-md-6"&gt;
              &lt;div class=" right-image" &gt;
                  &lt;div class="category cat03 fancy-card" style=" background-image:url('_1.jpg');width:593px;height:279px;"&gt;
                      &lt;div class="bg-overlay"&gt;&lt;/div&gt;
                      &lt;div class="v-border"&gt;&lt;/div&gt;
                      &lt;div class="h-border"&gt;&lt;/div&gt;    
                      &lt;div class="catnamediv"&gt;
                          &lt;p&gt;sectional sofa&lt;/p&gt;
                          &lt;a class="shopnow" href="#"&gt;shop now&lt;/a&gt;
                      &lt;/div&gt;  
                  &lt;/div&gt;
                  &lt;div class="category cat04 fancy-card" style=" background-image:url('_4.jpg');width:593px;height:279px;"&gt;                   
                      &lt;div class="bg-overlay"&gt;&lt;/div&gt;
                      &lt;div class="v-border"&gt;&lt;/div&gt;
                      &lt;div class="h-border"&gt;&lt;/div&gt;    
                      &lt;div class="catnamediv"&gt;
                          &lt;p&gt;sectional sofa&lt;/p&gt;
                          &lt;a class="shopnow" href="#"&gt;shop now&lt;/a&gt;
                      &lt;/div&gt;  
                  &lt;/div&gt;
  
                  &lt;div class="category cat05 fancy-card" style=" background-image:url('cat5.jpg');width:593px;height:279px;"&gt;                 
                      &lt;div class="bg-overlay"&gt;&lt;/div&gt;
                      &lt;div class="v-border"&gt;&lt;/div&gt;
                      &lt;div class="h-border"&gt;&lt;/div&gt;    
                      &lt;div class="catnamediv"&gt;
                          &lt;p&gt;sectional sofa&lt;/p&gt;
                          &lt;a class="shopnow" href="#"&gt;shop now&lt;/a&gt;
                      &lt;/div&gt;  
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I have also pasted this code in jsfiddle <a href="https://jsfiddle.net/arunendra/w8yhmt70/1/#&amp;togetherjs=Mt5zNmbI7k" rel="nofollow noreferrer">https://jsfiddle.net/arunendra/w8yhmt70/1/#&amp;togetherjs=Mt5zNmbI7k</a></p>
  
  <p>This code is written in html and bootsrap4</p>