在移动视图中更改列顺序 [英] Change column order in mobile view
问题描述
我想在移动视图中更改页面上2列的垂直顺序，以便第2列先出现，然后是第1列。
目前的订单是第一列第一列和第二列第二列，都在移动和桌面视图中。在移动视图中，列是垂直堆叠的，这就是我想要保留它们的方式，只是按不同的顺序。
我尝试过使用float，但模板的CSS中的某些内容覆盖了自定义项。这是一个测试页面，这里是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>列1< / h2>
< / div>
< / div>
< / div>
< div class =col-sm-6>
< div class =panel panel-default>
< div class =panel-body>
< h2>第2栏< / h2>
< / div>
< / div>
< / div>
< / div>
< / div>
< / section>
< / div>
< / div>
编辑：这与评论中提出的问题不同，因为该问题始于相同的列类，而我的列已经在不同的类中，但我仍然无法让它们在移动视图中表现不同。 解决方案
只要给你的 col-sm-4 a float：right 像它应该。
请参阅这个蹩脚的小提琴在哪里我刚刚复制了所有内容并添加了第一行：
.col-sm-4 {float：right！important}
I would like to change the vertical order of 2 columns on a page in mobile view, so that column 2 goes first and column 1 follows.
The current order is that column 1 goes first and column 2 goes second, both in mobile and desktop view. In mobile view, the columns are stacked vertically, which is how I want to keep them, only in different order.
I tried using float, but something in the template's CSS is overriding the customizations. Here is a test page, and here is the 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>
Edit: this is different from the question suggested in the comments because that starts out with columns in the same class, whereas my columns are already in different classes, but I still haven't been able to get them to behave differently in mobile view.
Just give your col-sm-4 a float:right and start playing with CSS until it looks like it should.
See this crappy fiddle where I just copied all your stuff and added the first line:
.col-sm-4 {float:right !important}
这篇关于在移动视图中更改列顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
