Responsive design: Changing markup with media quer

Question

With either media queries or jQuery, I'd like to change the HTML markup. I'm not sure what is the best option.

My current HTML markup:

<ul>
  <li>
    <div class="item-1">.....</div>
    <div class="item-2">.....</div>
  </li>
  <li>
    <div class="item-1">.....</div>
    <div class="item-2">.....</div>
  </li>
</ul>

For mobile portrait orientation, I'd like to keep a single <div> within a <li> so that the original 2 <li>s are converted to 4 <li>s as below:

<ul>
  <li>
    <div class="item-1">.....</div>
  </li>
  <li>
    <div class="item-1">.....</div>
  </li>
  <li>
    <div class="item-1">.....</div>
  </li>
  <li>
    <div class="item-1">.....</div>
  </li>
</ul>

How do I do this? I don't think media queries alone cannot handle this. What's the efficient way to resolve this?

Answer 1

If you are married to the concept of CSS-only, have you considered using two separate elements which are controlled via media queries? I'm not sure what the speed/load-time implications are with the script you have chosen, but this should work from a technical standpoint.

HTML

<ul id="fullscreen">
  <li>
    <div class="item-1">.....</div>
    <div class="item-2">.....</div>
  </li>
  <li>
    <div class="item-1">.....</div>
    <div class="item-2">.....</div>
  </li>
</ul>

<ul id="mobileonly">
  <li>
    <div class="item-1">.....</div>
  </li>
  <li>
    <div class="item-1">.....</div>
  </li>
  <li>
    <div class="item-1">.....</div>
  </li>
  <li>
    <div class="item-1">.....</div>
  </li>
</ul>

CSS

#fullscreen { display: block; }
#mobileonly { display: none; }

@media (max-width: 768px) {
    #fullscreen { display: none; }
    #mobileonly { display: block; }
}

You may be able to get better performance from jQuery if you're already using a slider (assuming you're already including the jQuery library). This tactic might warrant some speed/load testing to find the optimal solution. The more you can provide about the libraries you're using, and the script you're leveraging for the slider the more specific these answers can be.