如何使用CSS（首选）或Jquery重新排列移动的div元素？

Question

我只是想知道如何使用CSS重新排列移动设备的div元素。请查看下面的图片，提到我确切需要的内容。

桌面外观如下

但在移动视图中，我需要交换下面的位置。

我检查过但是我没有得到任何解决方案，你能帮我解决这个问题吗？ 我使用了Bootstrap v3.3.7

AzureVersion

https://jsfiddle.net/ravinthranath/b2Lfcqua/和https://jsfiddle.net/ravinthranath/4tw2p4j9/

Answer 1

我确定有一种更简单的方法，但只是乱搞我做了这个。 我相信如果你做了更多研究，你可以找到一个只有答案的答案。

编辑：

＆＃13;

＆＃13;

window.addEventListener("load", function() {
  document.getElementById("m1").innerHTML = document.getElementById("3").innerHTML;
  document.getElementById("m2").innerHTML = document.getElementById("1").innerHTML;
  document.getElementById("m3").innerHTML = document.getElementById("4").innerHTML;
  document.getElementById("m4").innerHTML = document.getElementById("2").innerHTML;
}, false);

＆＃13;

.card {
  background-color: #FFF;
  box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, .25);
  margin: 5px;
  padding: 10px;
}
.left {float: left;width:50%;overflow:hidden;}
.right {float: left;width:50%;overflow:hidden;}
.mobile {display: none;}
input {padding: 8px;}

.left .card:nth-child(1) {color: blue;}
.left .card:nth-child(2){color: green;}
.right .card:nth-child(1) {color: orange;}
.right .card:nth-child(2) {color: red;}

.card:nth-child(1) {color: orange;}
.card:nth-child(2) {color: blue;}
.card:nth-child(3) {color: red;}
.card:nth-child(4) {color: green;}
p {color:black!important;}

@media screen and (max-width: 601px) {
  .left {display:none;}
  .right {display:none;}
  .mobile {display:block;}
}

＆＃13;

<div class="left">
  <div id="1" class="card">
    <h2>Col-md-8</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices mattis urna, nec venenatis lectus dignissim aliquet. Nulla quis sodales metus. Nulla in nunc rhoncus, finibus mauris quis, mattis odio. Vestibulum scelerisque, augue eget ornare efficitur, purus metus hendrerit nibh, sed convallis mauris tortor eget odio. Phasellus ut enim eu nunc tincidunt euismod.</p>
  </div>
  <div id="2" class="card">
    <h2>Col-md-8</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices mattis urna, nec venenatis lectus dignissim aliquet. Nulla quis sodales metus. Nulla in nunc rhoncus, finibus mauris quis, mattis odio. Vestibulum scelerisque, augue eget ornare efficitur, purus metus hendrerit nibh, sed convallis mauris tortor eget odio. Phasellus ut enim eu nunc tincidunt euismod. Ut placerat ante fermentum nisi ornare pharetra. Praesent rhoncus metus neque, ut auctor sapien imperdiet et. Curabitur lacinia nisi non mi commodo, suscipit iaculis nibh cursus. Phasellus in tellus augue. Nam vel magna sodales lorem imperdiet fringilla vitae ac dolor. Nam at velit lacus. Quisque mollis convallis odio, et fermentum orci auctor vitae. Integer rhoncus ultricies dictum.</p>
  </div>
</div>
<div class="right">
  <div id="3" class="card">
    <h2>Col-md-4</h2>
    <input placeholder="Search" type="text">
  </div>
  <div id="4" class="card">
    <h2>Col-md-4</h2>
    <img src="http://cdn.tutorialzine.com/wp-content/uploads/2014/12/50-useful-libraries-resources-responsive-design2.jpg" style="width: 100%;" />
  </div>
</div>

<div class="mobile">
  <div id="m1" class="card"></div>
  <div id="m2" class="card"></div>
  <div id="m3" class="card"></div>
  <div id="m4" class="card"></div>
</div>

＆＃13;

＆＃13;

＆＃13;