使用Javascript移动行中的列

我已将网页分为三列，如下所示。并在

javascript

中用图像填充

div

<div id="fullPage" class="image-motion-wrapper">
    <div class="row">
        <div class="col-md-4" align="left" id="left">   
        </div>
        <div class="col-md-4" align="center" id="center">   
        </div>
        <div class="col-md-4" align="right" id="right">     
        </div>
    </div>
</div>

现在我需要使用

Javascript

从左向右移动第一个列（及其图像）

<div id="fullPage" class="image-motion-wrapper">
    <div class="row">
        <div class="col-md-4" align="left" id="left">   
        </div>
        <div class="col-md-4" align="center" id="center">   
        </div>
        <div class="col-md-4" align="right" id="right">     
        </div>
    </div>
</div>

我如何才能做到这一点？

试试这个（jQuery必选）：

---

你应该自己试试。 我为你做了一把小提琴。非常简单的一个。试一下，这将有助于理解这个概念

  $("#left").insertAfter($("#right"));

---

也许您不想这样做，但有一种选择是使用flex和order来实现这一点

CSS:

JS

HTML

---

这不适用于一些较旧的浏览器，但我喜欢它的易操作性，因为您只需更改

数据顺序

，其余部分就可以自行处理。我不确定您是否希望使用计时器、按钮等来执行此操作，但不管它是什么，您只需要确保左侧的

数据顺序上的元素小于中心的元素，而中心的元素小于右侧的元素。
是否使用引导？这种情况是否只发生一次？你想让这一切在计时器上发生吗？它只移动一列吗？它是动画还是快照？
document.querySelector（“.row div:first child”）.className+=“col-md-offset-8”
还是
document.getElementById（“左”）.className+=“col-md-offset-8”
图像是如何添加的？@Nim您在寻找类似的东西吗？
$("#left").insertAfter($("#right"));
$("#center").insertAfter($("#right"));

.row {
    display: flex;
    flex-direction: row;
}
.row div {
    order: attr(data-order);
}

function changeOrder() {
    document.getElementById('left').setAttribute('data-order', '4');
}

<div id="fullPage" class="image-motion-wrapper">
            <div class="row">
                <div class="col-md-4" data-order="1" id="left">   
                </div>
                <div class="col-md-4" data-order="1" id="center">   
                </div>
                <div class="col-md-4" data-order="2" id="right">     
                </div>
            </div>
        </div>