0

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?

isherwood
  • 58,414
  • 16
  • 114
  • 157
Dev
  • 11
  • 2
  • 2
    Why does the order of the list items have significance when the user has a desktop, but when on mobile the order of **same** data suddenly doesn't matter? (Note that changing the HTML changes the *meaning* and if you just want to change the *presentation* then ask about that) – Quentin Jan 12 '21 at 21:33
  • 1
    Switching the CSS property `list-style-type` between `disc` and `decimal` on the `
      ` **or** `
      ` with a media query will achieve that, style-wise -> https://jsfiddle.net/twc3sey2/
     – blex Jan 12 '21 at 21:37
  • i added a plugin that allow the user to sort the list dragging (that works only in desktop but not in mobile using
      ) at the same time in mobile the
    1. tags, which has links inside does not work with
        tags, only with
        ones, so thats why i need to change the tags for mobile devices
     – Dev Jan 12 '21 at 21:39
  • Does this answer your question? [How to use javascript conditionally like CSS3 media queries, orientation?](https://stackoverflow.com/questions/7625718/how-to-use-javascript-conditionally-like-css3-media-queries-orientation) – Heretic Monkey Jan 12 '21 at 21:49
  • I suspect that you've asked an [XY question](http://xyproblem.info). Instead, ask for a solution to your _actual_ problem. – isherwood Jan 12 '21 at 21:58

2 Answers2

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.

b3lg1c4
  • 76
  • 1
  • 4
  • I think that this is not entirely true.. Since the contents of the lists (`
  • ` tags) should be the **same**, but not duplicates.
    • – s.kuznetsov Jan 12 '21 at 21:47
  • Yes, that's a disadvantage. – b3lg1c4 Jan 12 '21 at 21:51
  • thanks, its duplicated but it works for now!! – Dev Jan 12 '21 at 22:31
  • Yes, its not a good practice to have duplicated elements. You can use javascript to achieve it too. Don't forget accept the answer if this helped you. Thanks. – b3lg1c4 Jan 12 '21 at 22:55