change h3 to h1 by using media query

Can I change the <h3> in div.pagedesc to a <h1> using the media query?

    /* For Laptop */

@media only screen and (max-width: 1400px) and (min-width: 600px) {
  .col-1 {
    width: 8.33%;
  }
  .col-2 {
    width: 16.66%;
  }
  .col-3 {
    width: 25%;
  }
  .col-4 {
    width: 33.33%;
  }
  .col-5 {
    width: 41.66%;
  }
  .col-6 {
    width: 50%;
  }
  .col-7 {
    width: 58.33%;
  }
  .col-8 {
    width: 66.66%;
  }
  .col-9 {
    width: 75%;
  }
  .col-10 {
    width: 83.33%;
  }
  .col-11 {
    width: 91.66%;
  }
  .col-12 {
    width: 100%;
  }
  .header {
    position: fixed;
    width: 100%;
  }
  .title {
    width: 70%;
    padding: 5px;
    text-align: left;
    border-bottom-left-radius: 15px;
    float: left;
  }
  .pagedesc {
    background-color: #20619C;
    padding: 17px;
    width: 30%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    float: left;
    border-bottom-left-radius: 0px;
  }
  @media only screen and (max-width: 2400px) and (min-width: 1401px) {
    /* For desktop: */
    .col-1 {
      width: 8.33%;
    }
    .col-2 {
      width: 16.66%;
    }
    .col-3 {
      width: 25%;
    }
    .col-4 {
      width: 33.33%;
    }
    .col-5 {
      width: 41.66%;
    }
    .col-6 {
      width: 50%;
    }
    .col-7 {
      width: 58.33%;
    }
    .col-8 {
      width: 66.66%;
    }
    .col-9 {
      width: 75%;
    }
    .col-10 {
      width: 83.33%;
    }
    .col-11 {
      width: 91.66%;
    }
    .col-12 {
      width: 100%;
    }
    .header {
      position: fixed;
      width: 100%;
    }
    .title {
      text-align: left;
      border-bottom-right-radius: 15px;
      border-bottom-left-radius: 15px;
    }
    .pagedesc {
      width: 30%;
      display: block;
      margin-left: auto;
      margin-right: auto;
    }

<div class="header">
  <div class="title">
    <h1>Title</h1>
  </div>
  <div class="pagedesc">
    <h3>Description</h3>
  </div>
</div>

View on JSFiddle

Solution

Changing tags isn't the best idea to handle responsiveness, but I've seen worse. Did your media queries even work? They are missing the closing bracket: }

@media only screen and (max-width: 1400px) and (min-width: 601px) {
  selector {
    property: value; 
    shorthand-property: value value value;
  }
  selector::pseudo-element {
    property: value;
  }
}  /*<<<=========That last bracket for both media queries are missing*/

Also, there some common styles that you included in the MQ (Media Query) that belong in the general location of the stylesheet. The styles inside a MQ are styles that only occur within the conditions declared by that particular MQ.

In the Demo's HTML, both headings are added:

<div class="pagedesc">
  <h2 class='h2'>H2 Description</h2>
  <h3 class='h3'>H3 Description</h3>
</div>

I used the logical and semantic progression by adding a H2 instead of another H1. Both headings have a class .h2 and .h3 respectively. Of course if H2 is missing, not so seantic...

In the general CSS:

.h2 {display:block}
.h3 {display:none}

A new MQ was added that has a max-width:600px. When that occurs:

.h2 {display:none}
.h3 {display:block}

Demo

<!doctype html>
<html>

<head>
  <meta charset='utf-8'>
  <style>
    .col-1 {
      width: 8.33%;
    }
    
    .col-2 {
      width: 16.66%;
    }
    
    .col-3 {
      width: 25%;
    }
    
    .col-4 {
      width: 33.33%;
    }
    
    .col-5 {
      width: 41.66%;
    }
    
    .col-6 {
      width: 50%;
    }
    
    .col-7 {
      width: 58.33%;
    }
    
    .col-8 {
      width: 66.66%;
    }
    
    .col-9 {
      width: 75%;
    }
    
    .col-10 {
      width: 83.33%;
    }
    
    .col-11 {
      width: 91.66%;
    }
    
    .col-12 {
      width: 100%;
    }
    
    .header {
      position: fixed;
      width: 100%;
    }
    
    .h2 {
      display: block;
    }
    
    .h3 {
      display: none;
    }
    
    @media only screen and (max-width: 600px) {
      .h2 {
        display: none;
      }
      .h3 {
        display: block;
      }
    }
    
    @media only screen and (max-width: 1400px) and (min-width: 601px) {
      .title {
        width: 70%;
        padding: 5px;
        text-align: left;
        border-bottom-left-radius: 15px;
        float: left;
      }
      .pagedesc {
        background-color: #20619C;
        padding: 17px;
        width: 30%;
        display: block;
        margin-left: auto;
        margin-right: auto;
        float: left;
        border-bottom-left-radius: 0px;
      }
    }
    
    @media only screen and (max-width: 2400px) and (min-width: 1401px) {
      .title {
        text-align: left;
        border-bottom-right-radius: 15px;
        border-bottom-left-radius: 15px;
      }
      .pagedesc {
        width: 30%;
        display: block;
        margin-left: auto;
        margin-right: auto;
      }
    }
  </style>
</head>

<body>
  <header class="header">
    <div class="title">
      <h1>H1 Title</h1>
    </div>
    <div class="pagedesc">
      <h2 class='h2'>H2 Description</h2>
      <h3 class='h3'>H3 Description</h3>
    </div>
  </header>

  <script></script>
</body>

</html>