title: Change form initally selected option via CSS media query
body: <p>In order to have a selection dropdown text fit smaller screen, I have been asked to change the text of the initially selected option for smaller screens. This page was done with bootstrap and the initial selected option is the question itself (disabled as a valid selection).</p>
  
  <p>I could use Javascript to accomplish this. A CSS-only solution that's quick and works is to duplicate the select element and have one class for mobile and one class for larger screens, where each class just displays or hides the element. (Following the logic in 
  <a href="https://stackoverflow.com/questions/18176102/swap-placeholder-text-based-on-resolution-media-query">Swap placeholder text based on resolution (media query)</a>)</p>
  
  <p>Ideally, I would would apply such classes only to the option elements rather than repeat the whole select element.</p>
  
  <pre><code>&lt;div class="form-group col-md-6 col-md-offset-3"&gt;
      &lt;select name="budget" id="" class="form-control input-lg"&gt;
          &lt;option class="long"  value="" disabled selected&gt;WHAT IS YOUR TIMELINE TO COMPLETE THIS PROJECT?&lt;/option&gt;
          &lt;option class="short" value="" disabled selected&gt;WHAT'S YOUR TIMELINE?&lt;/option&gt;
          &lt;option&gt;I'm not sure&lt;/option&gt;
          &lt;option&gt;3 months&lt;/option&gt;
          &lt;option&gt;6 months&lt;/option&gt;
          &lt;option&gt;1 year&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Where the CSS for the mobile media query is the following (reversed for other displays):</p>
  
  <pre><code>.long {
      display: none;
  }
  .short {
      display: inherit;
  }
  </code></pre>
  
  <p>While this succeeds in hiding the dropdown option, the selected attribute is still recognized, so "WHAT'S YOUR TIMELINE?" will always be the initial question displayed, even if the option itself is not displayed in the dropdown.</p>
  
  <p>Again, I am just going with a solution of duplicating the select element, but for my own knowledge, I am wondering if there is a HTML/CSS-only solution that would say "in mobile, option 2 is initially selected (and visible; option 1 is hidden); otherwise, option 1 is selected (and option 2 is hidden)". </p>