如何使用 CSS(Preferred) 或 Jquery 重新排列移动设备的 div 元素？

Question

我只想知道如何使用 CSS 重新排列移动设备的 div 元素。请检查下面的图片以提及我到底需要什么。

桌面如下所示

但在移动视图中，我需要像下面这样互换位置。

我检查了它，但我没有得到任何解决方案，你能在这种情况下帮助我吗？ 我使用的是 Bootstrap v3.3.7

<div class="container">
<div class="row">

    <div class="col-sm-4 col-lg-4 col-sm-push-8">
      <div class="border">
       Content B
       <hr/>
       <p>
       I think most people would (at first) assume that the desktop views would be rendered in normal order and that the pushing and pulling are done on the mobile views. Once you realize that the complete opposite is true, you begin to understand how to layout your columns in the correct order, and the correct classes that need to be used.

Conclusion
The two statements below summarize the functionality of the push and pull classes and should give you the full understanding of how they work, and how they should be used.

col-vp-push-x = push the column to the right by x number of columns, starting from where the column would normally render (position: relative), on a vp or larger view-port.

col-vp-pull-x = pull the column to the left by x number of columns, starting from where the column would normally render (position: relative), on a vp or larger view-port.

vp = xs, sm, md, or lg (minimum viewport)

x = 1 thru 12 (number of columns)
       </p>
      </div>
    </div>

    <div class="col-sm-8 col-lg-8 col-sm-pull-4">
      <div class="border">
        Content A
        <hr/>
         <p>
       I think most people would (at first) assume that the desktop views would be rendered in normal order and that the pushing and pulling are done on the mobile views. Once you realize that the complete opposite is true, you begin to understand how to layout your columns in the correct order, and the correct classes that need to be used.

       </p>
      </div>
    </div>

</div>
</div>

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

Answer 1

我确信有一种更简单的方法，但我只是在搞乱我做了这个。 我敢肯定，如果您进行更多研究，您可以找到仅 css 的答案。

已编辑：

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);

.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;}
}

<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>