title: make a single heading for both mobile and desktop view with two different font sizes
body: <p>In my application i want the heading to be in two different fonts-sizes for mobile view and desktop view</p>
  <p>Here is what i achieved to do so and  it works!</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-html lang-html prettyprint-override"><code>&lt;h2 class="mb-0 d-none d-lg-block" &gt;My APP Name Desktop&lt;/h2&gt;
  &lt;h2 class="mb-0 d-block d-lg-none" style="font-size: medium;"&gt;My APP Name Mobile&lt;/h2&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>But instead of using two h2 is there any way to combine both in a single heading other than media queries in css file.</p>