我正在尝试在引导程序中构建一个 2 列表单布局，右侧有一个固定高度的文本区域。我让它在桌面屏幕上运行良好，在 textarea 框上有一个.pull-right-md（自己的类）。但是在“响应”模式下（在较小的屏幕上），我对盒子的顺序有疑问。我希望 textarea 在小屏幕上显示时位于最后一个位置。我已经尝试通过使用 .col-*-pull 和 .col-*-push 类订购 col 来解决这个问题，但它不起作用。
在这里你可以看到我到目前为止所做的事情：http://www.bootply.com/BBFB4Tt97j
您有什么想法可以解决这个问题吗？
【问题讨论】：
标签： html css forms twitter-bootstrap responsive-design
这就是我的建议，尝试通过拉和推来解决问题，但我还没有找到解决方案。您可以使用 hidden-xs, visible-xs 创建两个不同的文本区域，一个仅在小屏幕上可见，另一个仅在大屏幕上可见。但是您要确保在处理表单时处理两个不同的文本区域。
<form class="">
<div class="col-md-6 col-sm-12 form-group pull-right-md hidden-sm hidden-xs">
<textarea class="form-control textarea-fixed-height" id="textarea" name="textarea">default text</textarea>
</div>
<div class="col-md-6 col-sm-12 form-group">
<input class="form-control" id="inputEmail3" placeholder="Name" type="text">
</div>
<div class="col-md-6 col-sm-12 form-group">
<input class="form-control" id="inputPassword3" placeholder="Email" type="email">
</div>
<div class="col-md-6 col-sm-12 form-group">
<input class="form-control" id="inputPassword3" placeholder="Telefon" type="text">
</div>
<div class="col-md-6 col-sm-12 form-group">
<input class="form-control" id="inputPassword3" placeholder="Betreff" type="text">
</div>
<div class="col-md-6 col-sm-12 form-group pull-right-md hidden-lg hidden-md">
<textarea class="form-control textarea-fixed-height" id="textarea1" name="textarea1">default text</textarea>
</div>
</form>
【讨论】：
所以对于遇到相同问题的每个人，这就是我的问题的解决方案：http://www.bootply.com/BBFB4Tt97j#
我在form-tag 中放了两个textareas。一个作为第一个框，第二个在最后一个位置，但在提交按钮之前。在第一个文本区域中使用 .hidden-xs 和 .hidden-sm 对于较小的设备不可见，使用 .hidden-md 和 .hidden-lg 我会阻止 textarea-标签出现在大屏幕上。
现在一切正常.. thx
【讨论】：
请不要为了样式而复制 html 元素，这是不值得的！你破坏了语义，并产生了难以维护的不合逻辑的代码。
无需复制任何东西，即可轻松达到想要的效果：
http://output.jsbin.com/debenudiqi/2/
你可以在这里获取代码
【讨论】：