Question

我想在移动视图中更改页面上2列的垂直顺序，以便第2列位于第1列，第1列位于第1列。

目前的顺序是第1列第一，第2列第二，在移动和桌面视图中。在移动视图中，列是垂直堆叠的，这就是我想要保留它们的方式，只是按照不同的顺序。

我尝试使用float，但模板的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>

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

Answer 1

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

请参阅this crappy fiddle我刚刚复制了所有内容并添加了第一行：

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

在移动视图中更改列顺序

1 个答案: