html - 以相反顺序响应式显示 2 列的最佳方法是什么？

Question

考虑以下 2 列布局示例:

<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 显示在#leftColumn 之上的最佳方法是什么？一种解决方案是创建额外的标记并在所需的断点处隐藏额外的部分。但这似乎不是很语义化。

有没有更好的办法？

Answer 1

Bootstrap3 是移动优先的，因此理想情况下标记应该是移动优先的。我会交换 <div>然后使用 -push和 - pull来自 docs在大屏幕上左右移动 div。

基本上push-和 pull-完全按照锡 jar 上的说明进行操作。他们插入柱子(向右)，然后拉它们(向左)。我可以继续解释它是如何工作的，但我认为这有点超出了这个答案的范围。在 helloerik.com 上有一篇关于 bootstrap 网格背后魔法的精彩文章。 ，其中还包括有关 Bootstraps 的详细部分 push-和 pull-类。