javascript - 引导表单重复的内容

我在桌面上有这样的页面结构：

<form>
___________________________________________________
|                                                 |
|                                  [] checkbox    |
|             <div>TITLE</div>                    |
|            <div>SUBTITLE</div>                  |
|_________________________________________________|
</form>

在移动设备上，我想要这样：

<form>
____________________
|                  |
|   <div></div>    |
|   <div></div>    |
|   []checkbox     |
|__________________|
</form>

代码：

<form>
    <div class="row">
        <div class="col-sm-12 text-right visible-lg">
            <input type="checkbox">
        </div>
        <div class="col-sm-12 text-center">
            TITLE
        </div>
        <div class="col-sm-12 text-center">
            SUBTITLE
        </div>
        <div class="col-sm-12 text-right hidden-lg">
            <input type="checkbox">
        </div>
    </div>
</form>

试图与.visible-lg .hidden-lg等玩，但问题是复选框相同（克隆-相同的name，id，class），并且在提交表格时它们混淆了所有逻辑。如果首先我检查了但第二次没有检查，那么在发布后我仍然得到检查。

在这种情况下我该怎么办？

复选框是切换按钮（bootstrapetoggle.com）

最佳答案

使用flexbox。您可以设置其中任何元素的顺序。在这种情况下，默认值是order: 1;（并且联系是按实际顺序解决的），并且通过将复选框设置为order: 2;，它会在其他两个选项下向下移动。

@media (max-width: 480px) {
  .row {
    display: flex;
    flex-direction: column;
  }
  #withcheckbox {
    order: 2;
    text-align: center;
  }
}

JSFiddle

关于javascript - 引导表单重复的内容，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42441894/