使特定 div 出现在另一个 div 之前

Question

截至 link：https://www.fermento24.com/collections/all?pf_t_premi=Premio+Vitae&pf_t_premi_and_condition=true

我有这些图标 class="tag boost-pfs-filter-label categories important"，我希望这些图标出现在其他图标之前 class="tag boost -pfs-filter-label premi important boost-pfs-action-overlay".

无法通过 html 更改它，因为它们是由 js 生成的（请参阅 js fiddle：https://jsfiddle.net/morganpubblicita/d93czaeg/），即使我尝试将类别部分移至置顶，只是没有显示而已。

我尝试为 premi 标签添加“absolute”和“top:100%”，但它们会相互叠加。

有什么办法可以解决这个问题？

<div class="boost-pfs-filter-product-item-label"><span class="sale boost-pfs-filter-label"> Sconto </span><span class="tag boost-pfs-filter-label premi important boost-pfs-action-overlay">
  <span class="grade">5</span>
  <img src="//cdn.shopify.com/s/files/1/0268/0383/0855/t/12/assets/bibenda.svg?v=969584104512111952">
  <span class="tooltip boost-pfs-action-overlay">
    <b>Premio Bibenda:</b><br>Annata: 2018 – Punteggio <img src="link"><img src="link"><img src="link"><img src="link"><br><i>Vino leggendario</i>
  </span>
</span><span class="tag boost-pfs-filter-label premi important boost-pfs-action-overlay">
  <span class="grade">3</span>
  <img src="//cdn.shopify.com/s/files/1/0268/0383/0855/t/12/assets/gamberorosso.svg?v=4883056955815699697">
  <span class="tooltip">
    <b>Premio Gambero rosso:</b><br>Annata: 2019 – Punteggio di 3 su 3<br><i>Vino eccellente</i>
  </span>
</span><span class="tag boost-pfs-filter-label premi important boost-pfs-action-overlay">
  <span class="grade">2</span>
  <img src="//cdn.shopify.com/s/files/1/0268/0383/0855/t/12/assets/slowwine.svg?v=13534204178531355278">
  <span class="tooltip">
    <b>Premio Vino Slow:</b><br>Annata: 2019 – Punteggio di 91 su 100<br><i>Vino Eccellente con caratteri legati al territorio</i>
  </span>
</span><span class="tag boost-pfs-filter-label categories important">
 <a href="/collections/all/products/cerasuolo-dabruzzo-2019-emidio-pepe" class="boost-pfs-filter-product-item-title boost-pfs-action-overlay"> <img src="//cdn.shopify.com/s/files/1/0268/0383/0855/t/12/assets/prezzo.svg?v=2402614121362096238" title="Rapporto qualita prezzo">
  </a></span><span class="tag boost-pfs-filter-label categories important">
 <a href="/collections/all/products/cerasuolo-dabruzzo-2019-emidio-pepe" class="boost-pfs-filter-product-item-title boost-pfs-action-overlay"> <img src="//cdn.shopify.com/s/files/1/0268/0383/0855/t/12/assets/romantica.svg?v=4990615261420446289" title="Vino per una cena romantica">
  </a></span></div>

Answer 1

在JS代码中切换顺序

 var premiLabel = '';

 var categoriesLabel = '';
      for (var i = 0; i < data.tags.length; i++) {
        var tag = data.tags[i];
        if (tag.indexOf("categories_Rapporto qualità/prezzo") !== -1) {
          if (tag.indexOf("important") !== -1) {
            var prezzoLabel = boostPFSTemplate.prezzoLabelHtml.replace(/{{prezzoGrade}}/g, tag.split('_')[2]).replace(/{{prezzoClass}}/g, "important");
          } else {
            var prezzoLabel = boostPFSTemplate.prezzoLabelHtml.replace(/{{prezzoGrade}}/g, tag.split('_')[2]).replace(/{{prezzoClass}}/g, "unimportant");
          }
          premiLabel += prezzoLabel;

......


 for (var i = 0; i < data.tags.length; i++) {
        var tag = data.tags[i];
        if (tag.indexOf("premi_Gambero Rosso") !== -1) {
          if (tag.indexOf("important") !== -1) {
            var gamberoRossoLabel = boostPFSTemplate.gamberoRossoLabelHtml.replace(/{{gamberoRossoDescription}}/g, tag.split('_')[3]).replace(/{{gamberoRossoGrade}}/g, tag.split('_')[2]).replace(/{{gamberoRossoClass}}/g, "important");
          } else {
            var gamberoRossoLabel = boostPFSTemplate.gamberoRossoLabelHtml.replace(/{{gamberoRossoDescription}}/g, tag.split('_')[3]).replace(/{{gamberoRossoGrade}}/g, tag.split('_')[2]).replace(/{{gamberoRossoClass}}/g, "unimportant");
          }
          premiLabel += gamberoRossoLabel;

.....

使特定 div 出现在另一个 div 之前

Make specific div appear before another div

html

javascript

css

shopify