Html 什么'；以相反顺序显示两列的最佳方法是什么？

考虑以下两列布局的示例：

<div id="leftColumn" class="col-lg-6">
    <p>Some content</p>
</div>
<div id="rightColumn" class="col-lg-6">
    <p>Some content</p>
</div>

一些内容

一些内容

在移动断点上显示#rightColumn over#leftColumn的最佳方法是什么？一种解决方案是创建额外的标记，并在所需的断点处隐藏额外的部分。但这似乎不太符合语义

---

有更好的方法吗？

Bootstrap3首先是移动的，因此理想情况下标记应该首先是移动的。我会将

互换，然后从中使用

-push

和-

pull

在较大屏幕上左右移动div

---

基本上，

push-

和

pull-

完全按照锡罐上的指示执行。他们推柱（向右），拉柱（向左）。我可以继续解释它是如何工作的，但我认为这有点超出了这个答案的范围。在上有一篇关于bootstrap网格背后的魔力的精彩文章，其中还包括一个关于bootstrap

push-

和

pull-

类的详细章节。

我认为，最简单的方法是更改DOM结构

HTML:

---

为什么不从另一个方向开始呢？这当然是一个选择。但是如果不是呢？如果它是要在移动设备中放在前面，那么页面顺序肯定应该是，如果没有样式，右边的内容在左边之前开始？无论如何，我会做一些事情，因为改变左右比改变顶部和底部更容易。“这当然是一个选项。但如果不是呢？”如果你可以访问JavaScript，这是一个选项。：）谢谢这正是我一直在寻找的答案，不过，描述一下推拉工作的原因可能会有所帮助。如果你不介意的话，我会继续，然后接受这个答案。怎么样？这个链接在解释这些课程的效果方面比我做得好得多。

<div id="rightColumn" class="col-lg-6">
    <p>Some content</p>
</div>

<div id="leftColumn" class="col-lg-6">
    <p>Some content</p>
</div>

    #rightColumn, #leftColumn {
    width: 50%;
    /* other definitions */
    float: left;
   }
   #rightColumn {
    float: right;
   }
   @media screen and (max-width: 600px) {
    #rightColumn, #leftColumn { float: none; }
   }