移动和桌面响应式标记

Question

我正在开发一个网站，我正在使用bootstrap框架。我希望网站能够响应大多数的divices。问题是移动标记与桌面标记有所不同，不是所有标记，而是一些块。我该怎么办？根据设备重新放置信息并显示和隐藏？什么是最佳做法？ 提前谢谢！

例如，我有这个标记显示相同的信息但具有不同的结构，这只是一个例子：

virtual

根据设备显示和隐藏的媒体查询，我担心的是我复制信息，因为它显示在不同的结构html中，我不知道这是正确的。

Answer 1

我不会有重复的元素做同样的事情 - 只需为每个元素分配不同的类，并在屏幕大小上以不同的方式显示它们。请记住，有些课程不会出现在较小的屏幕尺寸上 - 例如col-lg和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;
}
}