javascript - 使用 jQuery 或 CSS 交换列表项——这可能吗？

Question

我有一个非常适合桌面的列表，但我需要将它们移动到移动设备上 - 它们显示图像，但需要为移动设备以不同的方式排列它们，并且想知道是否可以在 CSS 或 jQuery 中完成。

正如您从屏幕截图中看到的那样，桌面是左左右右，这很好但是在移动设备上我需要左、右、左、右等。我无法修改标记，因为它是在 Smarty 模板中生成的, 所以需要用 CSS 或 jQuery 来解决。

虽然我不知道如何做到这一点。

对于 Desktop 工作正常，像这样:

ITEM 1 | ITEM 2
ITEM 3 | ITEM 4
ITEM 5 | ITEM 6
ITEM 7 | ITEM 8

对于Mobile，目前是这样的:

ITEM 1
ITEM 2
ITEM 3
ITEM 4
ITEM 5
ITEM 6
ITEM 7
ITEM 8

但是，我想在移动设备上变成这样:

ITEM 1
ITEM 3
ITEM 2
ITEM 4
ITEM 5
ITEM 7
ITEM 6
ITEM 8

HTML列表:

<ul class="subcategories clearfix">
  <li class="ty-subcategories__item">
    <a href="/interior/gold-class-bean-bags/butterfly-sofa-bean-bags/">
      <img class="ty-pict  ty-subcategories-img  "    src="/images/detailed/3/category-panel-butterfly.jpg?t=1437997789" alt="" title=""  />
    </a>
  </li>
  <li class="ty-subcategories__item">
    <a href="/interior/gold-class-bean-bags/avatar-lounger-bean-bags/">
      <img class="ty-pict  ty-subcategories-img  "    src="/images/detailed/3/category-panel-avatar.jpg?t=1437997872" alt="" title=""  />
    </a>
  </li>
  <li class="ty-subcategories__item">
    <a href="/interior/gold-class-bean-bags/twin-couch-bean-bags/">
      <img class="ty-pict  ty-subcategories-img  "    src="/images/detailed/3/category-panel-twin.jpg?t=1437998079" alt="" title=""  />
    </a>
  </li>
  <li class="ty-subcategories__item">
    <a href="/interior/gold-class-bean-bags/versa-table-bean-bags/">
      <img class="ty-pict  ty-subcategories-img  "    src="/images/detailed/3/category-panel-versa.jpg?t=1437998061" alt="" title=""  />
    </a>
  </li>
  <li class="ty-subcategories__item">
    <a href="/interior/gold-class-bean-bags/acoustic-sofa-bean-bags/">
      <img class="ty-pict  ty-subcategories-img  "    src="/images/detailed/3/category-panel-acoustic.jpg?t=1437998265" alt="" title=""  />
    </a>
  </li>
  <li class="ty-subcategories__item">
    <a href="/interior/gold-class-bean-bags/pet-lounger-bean-bags/">
      <img class="ty-pict  ty-subcategories-img  "    src="/images/detailed/3/category-panel-pet.jpg?t=1437996755" alt="" title=""  />
    </a>
  </li>
  <li class="ty-subcategories__item">
    <a href="/interior/gold-class-bean-bags/wing-ottoman-bean-bags/">
      <img class="ty-pict  ty-subcategories-img  "    src="/images/detailed/4/category-pane-wing-ottoman.jpg?t=1437998482" alt="" title=""  />
    </a>
  </li>
  <li class="ty-subcategories__item">
    <a href="/interior/gold-class-bean-bags/fiorenze-leather-bean-bags/">
      <img class="ty-pict  ty-subcategories-img  "    src="/images/detailed/3/category-panel-fiorenze.jpg?t=1437998353" alt="" title=""  />
    </a>
  </li>
</ul>

Answer 1

您可以使用纯 CSS 来做到这一点。您的列表中有一个 Logo ，在我的示例中，我使用 <span> .所以 HTML 看起来像这样:

<ul>
    <li><span>logo</span>ITEM 1</li>
    <li><span>logo</span>ITEM 2</li>
    <li><span>logo</span>ITEM 3</li>
    <li><span>logo</span>ITEM 4</li>
    <li><span>logo</span>ITEM 5</li>
    <li><span>logo</span>ITEM 6</li>
    <li><span>logo</span>ITEM 7</li>
    <li><span>logo</span>ITEM 8</li>
</ul>

所以我们想要的是将每个元素的 Logo 交换到左侧或右侧。所以我们将它们向左或向右浮动。

然后我们添加一个媒体查询。当屏幕变小(在我的示例中小于 600 像素)时，列表项变宽并且所有其他 Logo 都向左或向右浮动。

所有的 CSS 看起来像这样:

li {
    display: inline-block;
    margin-right: -4px;
    background: lightblue;
    width: 40%;
    height: 100px;
    margin: 4%;
}
li span {
    display: block;
    float: left;
    width: 100px;
    height: 100%;
    background: lightgreen;
}
li:nth-child(4n) span, 
li:nth-child(4n-1) span {
    float: right;
}
@media all and (max-width: 600px) {
    li {
        width: 90%;
    }    
    li:nth-child(odd) span {
        float: left;
    } 
    li:nth-child(even) span {
        float: right;
    }
}

DEMO
调整结果窗口的大小以查看“移动 View ”。