我需要用css改变句子的顺序

我是一个非常初学者，在WooCommerce中使用一个插件，这个插件在价格前显示一个句子，我需要颠倒它的顺序

现在是：

您可以赚取2点$100（在一条线上）

其中：“您可以赚取2分”是来自

的消息，而$100是来自

html是这样的：

<div class="single_variation">
    <span class="price">
    <span class="wc-pts-rwd-product-message">
    <span class="amount">$100</span>
    </span>
</div>

$100

我应该如何编写css使其显示为：

100美元 你可以获得2分

首先是价格（金额），然后是低于价格点的信息

我发现这是来自插件，所以我不能更改它，否则更新将被破坏

如果我只能通过css来完成它？

---

有人能帮我吗？非常感谢

你可以这样试试-

100美元
你可以获得1分

这里有一种非常简单的方法，你可以只使用

css

：

.single_variation .price{
  display: inline-block;
  width: 180px;
}
.single_variation .wc-pts-rwd-product-message{
  float: right;
}
.single_variation .amount{
  float: left;
}

根据字体大小调整180px值

css

不太适合此任务，如果可以，最好更改HTML流

要在WordPress中执行此操作，您需要找到输出此内容的模板，并在主题中覆盖它。这样，当插件更新时，您的更改不会被覆盖。以下是一些方法，可以让您在不更改核心代码的情况下开始修改WordPress插件：

• 挂钩和过滤器-
• 覆盖模板-
• 使用子主题修改主题-

---

修改css的一种方法是安装Jetpack插件并激活其css模块。然后在WordPress管理区的

外观->编辑CSS

下，您可以添加自己的

CSS

声明，这些声明可以覆盖原始的

CSS

您使用的是哪个插件？我知道你在使用WooCommerce。我是说哪个分机。这是一个单变量产品页面吗？你能提供这个页面的链接吗？谢谢James，但是我也不能更改主题文件，它会随着将来的更新而丢失，这就是为什么我希望找到一种只使用主题自定义css的方法。我认为插件会获取“金额”，添加“积分信息”并创建整个“价格”信息通过它的功能，但我不知道一点php。。。只是想法。无论如何谢谢你@M.Hatta确实如此，但您可以使用正确的WordPress技术覆盖或修改这些函数。此外，如果某个答案解决了您的问题，请您将其标记为已解决和/或投票表决。它让我们在回答和清理问题队列方面享有声誉。@M.Hatta添加了一些修改代码的技巧。关于Jetpack的最后一个技巧将有助于修改

css

。我正在尝试解决这个问题，但仍然找不到解决方案。我使用的是子主题，所以我可以添加自定义css。我尝试了你的代码，但它改变了整个网站的价格外观。我希望我能有一种方法先得到“金额”，然后是“消息”，如果可能的话，只在这个特定的div“single_variation”中使用css。