title: How To Make It Responsive for Desktop and Mobile?
body: <p>I have made this design using CSS and Bootstrap. I am Also Using Bootstrap. The Problem occurring is that this is not responsive. Can Anyone help me to make this responsive? </p>
  
  <p>HTML:</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>.ordering .spanone {
    position: absolute;
    width: 100px;
    left: 43%;
    right: 50%;
    font-size: 25px;
    top: 12%;
  }
  
  .ordering .spananother {
    position: absolute;
    width: 138px;
    left: 35%;
    right: 50%;
    font-size: 16px;
    top: 35%;
  }
  
  .ordering .spanthird {
    position: absolute;
    width: 138px;
    top: 45%;
    left: 39%;
    right: 50%;
    font-size: 16px;
  }
  
  .ordering .spanfourth {
    position: absolute;
    width: 138px;
    top: 55%;
    left: 35%;
    right: 50%;
    font-size: 16px;
  }
  
  .ordering .spanfifth {
    position: absolute;
    width: 229px;
    top: 66%;
    left: 24%;
    right: 50%;
    font-size: 16px;
  }
  
  .orange {
    vertical-align: middle;
    color: white;
    position: relative;
    background-color: #4C4245;
    height: 226px !important;
    width: 336px !important;
    z-index: 3;
    border-bottom-left-radius: 43%;
    float: right;
    margin-right: 2px;
  }
  
  .orange:after {
    content: '';
    position: absolute;
    left: 100%;
    width: 0;
    height: 0;
    border-top: solid 113px transparent;
    border-bottom: solid 113px transparent;
    border-left: solid 109px #4C4245;
  }
  
  .green {
    color: white;
    position: relative;
    background-color: #eaeaea;
    height: 226px !important;
    width: 380px !important;
    z-index: 2;
    margin-right: 50px;
    margin-top: 2px;
    float: right;
  }
  
  .green:after {
    content: '';
    position: absolute;
    left: 100%;
    width: 0;
    height: 0;
    border-top: solid 113px transparent;
    border-bottom: solid 113px transparent;
    border-left: solid 112px #eaeaea;
  }
  
  .green:before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-top: solid 113px transparent;
    border-bottom: solid 113px transparent;
    border-left: solid 112px white;
  }
  
  .blue {
    color: white;
    position: relative;
    background-color: #ededed;
    height: 226px !important;
    width: 383px !important;
    border-top-right-radius: 50%;
    float: right;
    margin-right: 100px;
  }
  
  .blue:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 100%;
    margin-left: 250px;
    width: 0;
    height: 0;
  }
  
  .blue:before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-top: solid 115px transparent;
    border-bottom: solid 115px transparent;
    border-left: solid 111px white;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;div class="row margin-bottom-30 margin-top-20 ordering" style="margin-top:38px;margin-bottom:38px;"&gt;
      &lt;div class="col-lg-4"&gt;
          &lt;div class="orange"&gt;
              &lt;span class="spanone"&gt;Step 1&lt;/span&gt;
              &lt;span class="spananother"&gt;Send us your file &amp;&lt;/span&gt;
              &lt;span class="spanthird"&gt;Project Details,&lt;/span&gt;
              &lt;span class="spanfourth"&gt;You will recieve a&lt;/span&gt;
              &lt;span class="spanfifth"&gt;customized estimated link back&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-lg-4"&gt;
          &lt;div class="green"&gt;
              &lt;span class="spanone" style="color:#4C4245"&gt;Step 2&lt;/span&gt;
              &lt;span class="spananother" style="color:#4C4245;width:180px"&gt;Click "Make my Sign" on&lt;/span&gt;
              &lt;span class="spanthird" style="color:#4C4245"&gt;the estimated link,&lt;/span&gt;
              &lt;span class="spanfourth" style="color:#4C4245;left:39%"&gt;You will recieve a&lt;/span&gt;
              &lt;span class="spanfifth" style="color:#4C4245;left:26%;width:251px;"&gt;customized completed notification&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-lg-4"&gt;
          &lt;div class="blue"&gt;
              &lt;span class="spanone" style="color:#4C4245"&gt;Step 3&lt;/span&gt;
              &lt;span class="spananother" style="color:#4C4245;width:180px"&gt;Click "Ship my Sign" on&lt;/span&gt;
              &lt;span class="spanthird" style="color:#4C4245;left:45%"&gt;the completion,&lt;/span&gt;
              &lt;span class="spanfourth" style="color:#4C4245;left:45%"&gt;notification link&lt;/span&gt;
              &lt;span class="spanfifth" style="color:#4C4245;left:26%;width:251px;"&gt;Your new sign is on its way-!!&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I know how to do it using MEDIA Query but I want to keep it responsive using minimum media query. </p>
  
  <p>The image which I have made using CSS</p>
  
  <p><a href="https://i.stack.imgur.com/Cyoqj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Cyoqj.png" alt="enter image description here"></a></p>