Hello, I have a layout that looks like this
IuseBootstraponit..Whenitreachesacertainbreakpointitgetsasimilarformattoit
I want to make the following effect, when the layout receives the formatting demonstrated in the second image, those green boxes should become links (in the desktop version the links are just small texts there)
I thought of 3 possibilities, the first would be using CSS, which would look like this: When the layout arrives in the breakpoint I remove the formatting from the "outside" box (div) and apply it in this link, using media queries ..
The second possibility would be using Javascript (or jQuery), where I use an if to check the document's .width (), if it's the size of the breakpoint I use a .wrap () or something like that to transform the boxes in links.
The third would be using CSS too, where I add twice the same content, one for mobile (with the boxes as links) and another for desktop (which is the pattern shown in the first image) and when I reach the breakpoint I hide one and show the other ..
Considering compatibility with browsers (desktop and mobile), what would be the best option? Do you have other ideas on how to do this?