Html 基础6开关标签定位

我使用的是带有交换机样式复选框的基础6，并且希望标签出现在交换机左边而不是交换机上方。关于如何实现这一点有什么想法吗

下面是一个示例，显示了下面的代码

<div class='grid-x'>
  <div class='cell small-3' id='quadDivLiveClient'>
    <div class='cell small-5'>
      <label>Exclude condition1?</label>
    </div>
    <div class='cell small-4 end'>
      <div class='switch tiny'>
        <input id='quadChk1' class='switch-input' type='checkbox' 
checked></input>
        <label class='switch-paddle' for='quadChk1'>
          <span class='show-for-sr'></span>
          <span class='switch-active' aria-hidden='true'>Yes</span>
          <span class='switch-inactive' aria-hidden='true'>No</span>
      </label>
      </div>
    </div>
  <div class='cell small-5'>
      <label>Exclude condition2?</label>
    </div>
    <div class='cell small-4 end'>
      <div class='switch tiny'>
        <input id='quadChk2' class='switch-input' type='checkbox' 
checked></input>
        <label class='switch-paddle' for='quadChk2'>
          <span class='show-for-sr'></span>
          <span class='switch-active' aria-hidden='true'>Yes</span>
          <span class='switch-inactive' aria-hidden='true'>No</span>
      </label>
      </div>
    </div>
<div class='cell small-5'>
      <label>Exclude condition3?</label>
    </div>
    <div class='cell small-4 end'>
      <div class='switch tiny'>
        <input id='quadChk3' class='switch-input' type='checkbox' 
checked></input>
        <label class='switch-paddle' for='quadChk3'>
          <span class='show-for-sr'></span>
          <span class='switch-active' aria-hidden='true'>Yes</span>
          <span class='switch-inactive' aria-hidden='true'>No</span>
      </label>
      </div>
    </div>
  </div>
</div>

排除条件1？
对
不
排除条件2？
对
不
排除条件3？
对
不

喜欢这个代码笔吗

添加此css样式：

.switch-paddle .switch-active, .switch-paddle .switch-inactive{
  position: absolute;
  left: 52px; 
  color: #000;
}

像这个密码笔

添加此css样式：

.switch-paddle .switch-active, .switch-paddle .switch-inactive{
  position: absolute;
  left: 52px; 
  color: #000;
}

---

查看该代码笔时，标签显示在开关上方，而不是侧面。在Chrome和Safari.ups中检查此项，我误解了您的问题，我认为您想将“是”/“否”标签改为侧面，而不是“问题”标签。可以吗？抱歉。我现在明白了，我在这一点上是无意中模棱两可的。好的，我想做的是把问题标签放在一边，同时在开关上留下是/否。然后，最终目标是有一列开关，因此将问题标签（解释开关用途的标签）放在一旁可能是最好的。有点像：“你想要这个功能吗？”（开关：是/否）“你想要这个功能吗？”（开关：是/否）等等。查看代码笔，标签显示在开关上方，而不是侧面。在Chrome和Safari.ups中检查此项，我误解了您的问题，我认为您想将“是”/“否”标签改为侧面，而不是“问题”标签。可以吗？抱歉。我现在明白了，我在这一点上是无意中模棱两可的。好的，我想做的是把问题标签放在一边，同时在开关上留下是/否。然后，最终目标是有一列开关，因此将问题标签（解释开关用途的标签）放在一旁可能是最好的。有点像：“你想要这个功能吗？”（开关：是/否）“你想要这个功能吗？”（开关：是/否）等等。。。