Mobile and Desktop responsive markup

Question

I am developing a website and I am using bootstrap framework. I want the website to be responsive for most the divices. The thing is that the mobile markup is a kind different form the desktop markup, not all the markup but some blocks. What shoould I do? Reapeat the information and show and hide depending on the device? What is the best practice? Thanks in advance!

For example I have this markup that show the same information but have different structure, this is just an example:

<div class="mobile-show desktop-hide">
<span>Here is my product list</span>
 <ul>
  <li>Item number 1</li>
  <li>Item number 2<li> 
</ul>
<div>


<div class="desktop-show mobile-hide">
 <h1>Here is my product list</h1>
 <div class="icon-block">
   <img src="icon1"></img>
   <img src="icon2"></img>
 </div>
</div>

By the media queries I show and hide depending the device, my fear is that I am duplicating the information because it is show in a different structure html, I dont know is that is correct.

Answer 1

I wouldn't have duplicate elements doing the same thing - just assign different classes to each of the elements and display them differently on screen sizes. Bare in mind that some classes dont show up on smaller screen sizes - eg col-lg and col-md .

<div class="mobile col-lg-8 col-xs-8">
<span>Here is my product list</span>
 <ul>
  <li class="col-xs-6 col-lg-6 col-md-6"><img class="show">Item number 1</li>
  <li class="col-xs-6 col-lg-6 col-md-6"><img class="show">Item number 2<li> 
</ul>
</div>

.show {
display:none;
}
@media only screen and (max-width:480px) {
.show {
display:block;
}
}