在移动视图中更改列顺序答案

【问题标题】：Change column order in mobile view在移动视图中更改列顺序
【发布时间】：2015-07-29 19:09:13
【问题描述】：

我想在移动视图中更改页面上 2 列的垂直顺序，以便第 2 列在前，第 1 列紧随其后。

当前的顺序是第 1 列在前，第 2 列在后，无论是在移动视图还是桌面视图中。在移动视图中，列是垂直堆叠的，这就是我想要保留它们的方式，只是顺序不同。

我尝试使用浮动，但模板的 CSS 中的某些内容覆盖了自定义。这是test 页面，这是 HTML。

<body class="theme-invert">
    <div class="container">
        <div class="row-fluid">         
            <section class="section">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-4 col-sm-offset-1">
                            <div class="panel panel-default">
                                <div class="panel-body">        
                                    <h2>Column 1</h2>                                           
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="panel panel-default">
                                <div class="panel-body"> 
                                    <h2>Column 2</h2>                             
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>

编辑：这与 cmets 中建议的问题不同，因为它从同一类中的列开始，而我的列已经在不同的类中，但我仍然无法让它们在移动视图。

【问题讨论】：

这就是你要找的东西：w3schools.com/cssref/css3_pr_order.asp
Bootstrap 3: pull-right for col-lg only的可能重复
这不是重复的，因为在那个问题中，解决方案是将第 1 列变成一个较小的列类（由 Bootstrap 的 css 定义）。就我而言，第 1 列和第 2 列已经是不同的类，我仍然无法让它工作。

标签： html css layout responsive-design multiple-columns

【解决方案1】：

只需给你的col-sm-4 一个float:right 并开始使用CSS，直到它看起来应该。

查看this crappy fiddle 我刚刚复制了你所有的东西并添加了第一行：

.col-sm-4 {float:right !important}

【讨论】：

嗨。我实际上已经尝试过了。如您所见，它并没有真正垂直重新排列列。 Bootstrap 已经内置了一个功能，可以在移动视图中将列整齐地堆叠在一起，我只需要更改它们的顺序。
你从来没有提到它们必须垂直重新排序......请设置一个正常运行的 JSFiddle（它看起来不像我的那样糟糕，我只是复制粘贴了所有内容）以便我们可以使用它。
谢谢。我已经编辑了这个问题，以澄清关于垂直堆叠的观点。你的小提琴是我能做到的。我已经摆脱了超过 10,000 行 CSS 代码，只保留了可能包含覆盖浮动设置的元素的元素。这段代码来自 Bootstrap，对我来说排错有点复杂。