Html 引导-如何移动一行'；我们跳到另一排吧？

我正在学习bootstrap，我正在使用网格系统，因为我正在使用一个有很多表的响应性网站

<div class="row">
    <div class="col-md-1">A</div>
    <div class="col-md-1">B</div>
    <div class="col-md-1">C</div>
</div>
<div class="row">
    <div class="col-md-1">D</div>
    <div class="col-md-1">E</div>
    <div class="col-md-1">F</div>
</div>

A.
B
C
D
E
F

我将从这个引导“表”开始。我想把第一行的一个div移到第二行。例如：

<div class="row">
    <div class="col-md-1">A</div>
    <div class="col-md-1">B</div>
</div>
<div class="row">
    <div class="col-md-1">C</div>
    <div class="col-md-1">D</div>
    <div class="col-md-1">E</div>
    <div class="col-md-1">F</div>
</div>

A.
B
C
D
E
F

如果我得到了你想要的，最简单的方法是： 1） 检查浏览器的宽度。 2） 然后，获取要移动的内部元素。 3） 将它添加到您想要的位置。 4） 并将其从以前的位置移除

代码HTML：

<div class="row" id="row1">
    <div class="col-md-1">
        A
    </div>
    <div class="col-md-1">
        B
    </div>
    <div class="col-md-1" id="moveto">

    </div>
</div>
<div class="row" id="row2">
    <h4>--</h4>
    <div class="col-md-1" id="movefrom">
        C
    </div>
    <div class="col-md-1">
        D
    </div>
    <div class="col-md-1">
        E
    </div>
    <div class="col-md-1">
        F
    </div>
</div>

A.
B
--
C
D
E
F

JS代码：

$(document).ready(function() {
     var x = document.getElementById("movefrom").innerHTML  // Get the inner HTML (C in this case)
     if (window.innerWidth <= 768) { // Check the browser's width
           document.getElementById("moveto").innerHTML = x; // Move the element to where you want (moveto id)
           document.getElementById("movefrom").innerHTML = "" // Replace the element by an empty string.
     }
});

$（文档）.ready（函数（）{
var x=document.getElementById（“movefrom”）.innerHTML//获取内部HTML（本例中为C）
如果（window.innerWidth好，我有这个简单的jQuery函数

(function($){
    $.fn.moveTo = function(selector){
        return this.each(function(){
            var cl = $(this).clone();
            $(cl).prependTo(selector);
            $(this).remove();
        });
    };
});

用法
$（'.element'）.moveTo（'.element2'）；
，您也可以将其更改为appendTo，或发送一个参数来更改它。
我认为您误解了引导的工作原理。它的网格无法通过“将一行的div移动到另一行”来工作。发生的情况是，网格基于每行12列。如果您希望在一行中包含3个元素，则可以将每个元素设置为
col-xx-4
（xx是lg、md、sm或xs）类，因为12/4=3。每个元素占据12列中的4列

对于您手头的问题-您可以将所有6个元素放在相同的
行中
，并使用lg、md、sm和xs根据屏幕大小调整每个元素跨越的列数。下面是一个示例，我相信您正在尝试手动移动行的div，但这种方法正确地利用了Bootstrap的网格系统

<div class="container">
    <div class="row">
      <div class="col-sm-4 col-xs-6">
          A
      </div>
      <div class="col-sm-4 col-xs-6">
          B
      </div>
      <div class="col-sm-4 col-xs-6">
          C
      </div>
      <div class="col-sm-4 col-xs-6">
          D
      </div>
      <div class="col-sm-4 col-xs-6">
          E
      </div>
      <div class="col-sm-4 col-xs-6">
          F
      </div>
  </div>
</div>


A.
B
C
D
E
F


您可以滑动屏幕使其变大/变小，然后看到2行3折叠为3行2，反之亦然。
回答太晚是我的爱好

如果希望它响应调整大小并以两种方式工作，请执行此操作：

window.addEventListener("resize", function(event) {

  //grab what to replace
  var x = document.getElementById("social")
    .innerHTML;

  //for when going to smaller screen 
  if (window.innerWidth <= 560 && !x == "") {
    document.getElementById("social-mobile")
      .innerHTML = x;
    document.getElementById("social")
      .innerHTML = "";
  }


  var y = document.getElementById("social")
    .innerHTML;
  // if we are at bigger screen and node is "", then put it back
  if (window.innerWidth >= 560 && y == "") {
    document.getElementById("social")
      .innerHTML = document.getElementById("social-mobile")
      .innerHTML;
    document.getElementById("social-mobile")
      .innerHTML = "";
  }
});

window.addEventListener（“调整大小”），函数（事件）{
//抓住要替换的东西
var x=document.getElementById（“社交”）
.innerHTML；
//当转到较小的屏幕时使用
如果（window.innerWidth=560&&y==“”）{
document.getElementById（“社交”）
.innerHTML=document.getElementById（“社交移动”）
.innerHTML；
document.getElementById（“社交移动”）
.innerHTML=“”；
}
});

“移动一排”是什么意思？你可以用Javascript来实现这一点。你想在你的列上进行拖放，为此你需要Javascript，你可以使用一个可排序的库来实现这一行为，你可以尝试或者我个人最喜欢的，我使用的库：。不，我不想拖放列，我想将包含“C”的div移动到第二个div（class=row）当我切换到移动可视化时，你就是我的新英雄：）@BigElle哈哈-我不知道英雄是什么，但我很乐意帮忙！：）