How do I replace an HTML element depending on screen size?

Question

I need to replace a <ol> element with a <ul> element by media query, so when the user is in desktop mode the result should be like this:

    <ol>
     <li></li>
     <li></li>
     <li></li>
    </ol>

but in mobile it should be:

    <ul>
     <li></li>
     <li></li>
     <li></li>
    </ul>

It is possible to do this by media query or jQuery?

Answer 1

Im not sure if its possible but you can use a class for each and manipulate they with displays:

<ol class="first-list">
<li></li>
<li></li>
<li></li>
<li></li>
</ol>

<ul class="second-list">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

And on CSS:

@media(max-width:768px){
    .first-list{
        display:none;
    }
    .second-list{
        display:block;
    }
}

Of course you can put in max-width what you need.

Answer 2

instead of having multiple(ol list and ul list).. just change the disc-type base on media query so:

@media (max-width: 640px) {
  ol {
    list-style-type: disc
  }
}

Which means its OL(decimals) and when it hits certain media query(mobile) it is still OL but the type can change to disc . Unless you need both actual ol/ul then this is your best bet.