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

等。但问题是复选框是相同的（克隆-相同的

名称

，

id

，

类

），提交表单时会混淆所有逻辑。如果第一次我检查了，但第二次没有，在帖子中我仍然得到它被检查了

在这种情况下我该怎么办

---

Checkeboxes是toggles（bootstrapetoggle.com）

保持接近，最简单的解决方法是用相同的操作将字段以两种不同的形式括起来。比如：

<form action="/myaction"> <!-- sm-hidden -->
[] check
<div></div>
<div></div>
<submit />
</form>

<form action="/myaction"> <!-- lg-hidden -->
<div></div>
<div></div>
[] check
<submit />
</form>

像这样做--

---------
+++++++++
复选框[]

使用flexbox。您可以设置其中任何元素的顺序。在这种情况下，默认为

顺序：1（按实际顺序解决关系），并将复选框设置为
顺序：2它在其他两个下向下移动

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

如果它们在同一行中，则可以使用PULL和PUSH类。@AnilTalla在图形中，每条新行都是一行。因此，它们不在同一行中编写javascript函数来删除其中一个元素，从onload调用该函数并调整事件大小。这就是问题所在，表单非常大，这只是表单的顶部。所以复制表单在这一点上并不好。顺便说一句，谢谢——编辑——如果您不介意通过javascript创建表单，您可以执行类似代码片段的操作，谢谢，但是div中的所有文本都应该是
。text center
和checkbox不应该在同一行中。在代码段中选中复选框与其他两个元素不在同一行中，而是将所有三个元素都包装在一个外行中。您可以轻松地使用。元素的文本中心