title: How to use two different designs for web and mobile
body: <p>I would like to be able to have a certain design for my web page, and when resized to mobile, use a different design. I will include photos to better explain.</p>
  
  <p>Here is the design that i would like to use for 
  <a href="http://i.stack.imgur.com/PUUax.png" rel="nofollow">Web</a>
  And here is the sketch for
  <a href="http://i.stack.imgur.com/fyc0Q.png" rel="nofollow">Mobile</a>
  I am not completely sure how to use media queries at the moment
  Here is the code so far</p>
  
  <p>HTML
          
              
                  Infants
              
              
                  Children 2+
              
          </p>
  
  <pre><code>    &lt;div class="row"&gt;
          &lt;div class="full-time col-sm-12 col-md-12 col-lg-2"&gt;Full Time&lt;/div&gt;
          &lt;div class="prices-left-box col-sm-12 col-md-12 col-lg-5"&gt;
              &lt;div class="prices-left"&gt;$200 Per Week&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="prices-right-box col-sm-12 col-md-12 col-lg-5"&gt;
              &lt;div class="prices-right"&gt;$150 Per Week&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="full-time col-sm-12 col-md-12 col-lg-2"&gt;Up to 4 Hours&lt;/div&gt;
          &lt;div class="prices-left-box col-sm-12 col-md-12 col-lg-5"&gt;
              &lt;div class="prices-left"&gt;$125 Per Week&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="prices-right-box col-sm-12 col-md-12 col-lg-5"&gt;
              &lt;div class="prices-right"&gt;$100 Per Week&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>And CSS:</p>
  
  <pre><code>@media (max-width: 992px) {
      .infants{
          color: black;
          background-color: #7FC7AF;
          font-size: 36px;
          font-weight: bold;
          font-family: "open sans";
          height: 125px;
          width: 304.3px;
          text-align: center;
          margin: auto;
          display: inline-block;
      }
  
      .children{
          color: black;
          background-color: #FF9E9D;
          font-size: 36px;
          font-weight: bold;
          font-family: "open sans";
          height: 125px;
          width: 304.4px;
          text-align: center;
          padding: auto;
          display: inline-block;
      }
  }
  
  .infants{
      color: white;
      background-color: #7FC7AF;
      font-size: 36px;
      font-weight: bold;
      font-family: "open sans";
      height: 87px;
      width: 304.3px;
      text-align: center;
  }
  
  .infants-box{
      padding-left: 176px;
      padding-right: 80px;
  }
  
  .children{
      color: white;
      background-color: #FF9E9D;
      font-size: 36px;
      font-weight: bold;
      font-family: "open sans";
      height: 87px;
      width: 304.4px;
      text-align: center;
  }
  
  .payment-method{
      font-size: 24px;
      padding-bottom: 57px;
      padding-top: 57px;
      text-align: center;
      font-family: "Source Sans Pro";
      font-weight: 600;
      font-style: italic;
      font-size: 24px;
      line-height: 30px;
      color: #4B4B4B
  }
  
  .full-time{
      background-color: #454545;
      color: white;
      font-size: 24px;
      font-weight: bold;
      font-family: "open sans";
      height: 150px;
      margin: auto;
      width: 176px;
      text-align: center;
  }
  .prices-left-box{
      background-color: white;
      width: 304.4px;
      height: 150px;
  }
  .prices-left{
      font-family: "source sans pro";
      font-size: 24px;
      width: 304.3px;
      margin-right: 220px;
      text-align: center;
  }
  
  .prices-right-box{
      background-color: #ffffff;
      width: 304.4px;
      margin-left: 10%;
      height: 150px
  }
  
  .prices-right{
          font-family: "source sans pro";
      font-size: 24px;
      background color: white !important;
      text-align: center;
  }
  .background-pricing{
      background-color: #F0F0F0;
      padding-bottom: 84px;
  }
  </code></pre>