3列响应CSS（排序内容位置） [英] 3 Column Responsive CSS (Ordering Contents Positions)
本文介绍了3列响应CSS（排序内容位置）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想知道当屏幕尺寸减小到480或更低时，有任何方法可以订购内容位置。我的意思是在col 3我将有名称，数字&地址等，在第2列我将有社会的东西，col 1我将有一个图像。我想先把名字和地址堆叠起来，然后是图像，然后是社交图标。顺序将是3,1,2。
code> / * SECTIONS * /
.section {
clear：both;
padding：0px;
margin：0px;
}
/ * COLUMN SETUP * /
.col {
display：block;
float：left;
margin：1％0 1％1.6％;
}
.col：first-child {margin-left：0; }
/ *三个网格============================== ========================================= * /
.span_3_of_3 {
width：100％;
}
.span_2_of_3 {
width：66.1％;
}
.span_1_of_3 {
width：32.2％;
}
/ * GO全屏宽度小于480像素* /
@media只有屏幕和（最大宽度：480像素）{
.span_3_of_3 {
width：100％;
}
.span_2_of_3 {
width：100％;
}
.span_1_of_3 {
width：100％;
}
}
HTML： p>
< div class =section group>
< div class =col span_1_of_3>
这是第1列
< / div>
< div class =col span_1_of_3>
这是第2列
< / div>
< div class =col span_1_of_3>
这是第3列
< / div>
< / div>
解决方案
移动和使用metadept的解决方案为桌面的列重新排序。
然而，如果源订单不能被修改任何原因，或者你不知道元素的宽度希望重新排序，那么您需要Flexbox：
http://jsfiddle.net / 4KUUt / 3 /
/ * SECTIONS * /
/ * line 5，../ sass / test.scss * /
.section {
clear：both;
padding：0px;
margin：0px;
}
/ *第11行，../sass/test.scss * /
.a {
background-color：#CCF;
}
/ * line 14，../sass/test.scss * /
.b {
background-color：#CFC;
}
/ * line 17，../sass/test.scss * /
.c {
background-color：#FCC;
}
/ *三个网格============================== ========================================= * /
@media only screen and（min-width：480px）{
/ * line 24，../sass/test.scss * /
.span_3_of_3 {
width：100％;
}
/ * line 28，../sass/test.scss * /
.span_2_of_3 {
width：66.1％;
}
/ * line 32，../sass/test.scss * /
.span_1_of_3 {
width：32.2％;
}
/ * COLUMN SETUP * /
/ *第37行，../sass/test.scss * /
.col {
显示：block;
float：left;
margin：1％0 1％1.6％;
}
/ * line 42，../sass/test.scss * /
.col：first-child {
margin-left：0;
}
}
@media only screen and（max-width：480px）{
/ * line 48，../sass/test.scss * /
.section {
width：100％; / * fix for Firefox * /
display：-webkit-box;
display：-moz-box;
display：-webkit-flexbox;
显示：-ms-flexbox;
display：-webkit-flex;
display：
-webkit-box-orient：vertical;
-moz-box-orient：vertical;
-webkit-box-direction：normal;
-moz-box-direction：normal;
-webkit-flex-direction：column;
-ms-flex-direction：column;
flex-direction：column;
}
/ * line 53，../sass/test.scss * /
.a {
-webkit-box-ordinal-group：2;
-moz-box-ordinal-group：2;
-webkit-flex-order：1;
-ms-flex-order：1;
-webkit-order：1;
order：1;
}
/ * line 57，../sass/test.scss * /
.b {
-webkit-box-ordinal-group：3;
-moz-box-ordinal-group：3;
-webkit-flex-order：2;
-ms-flex-order：2;
-webkit-order：2;
order：2;
}
}
< div class =section group>
< div class =col span_1_of_3 a>这是第1列< / div>
< div class =col span_1_of_3 b>这是第2列< / div>
< div class =col span_1_of_3 c>这是第3列< / div>
< / div>
请注意，我已修改您的媒体查询，使其更高效。
Im wondering is there any way to order the contents position when the screen size is reduced to 480 or lower. What i mean is in col 3 i will have the name, number & address etc, in column 2 i will have social stuff and col 1 i will have an image. I would like to have the name and address stack up first, then the image, then the social icons. The order would be 3,1,2. Im trying to keep it responsive.
CSS:
/* SECTIONS */
.section {
clear: both;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }
/* GRID OF THREE ============================================================================= */
.span_3_of_3 {
width: 100%;
}
.span_2_of_3 {
width: 66.1%;
}
.span_1_of_3 {
width: 32.2%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
@media only screen and (max-width: 480px) {
.span_3_of_3 {
width: 100%;
}
.span_2_of_3 {
width: 100%;
}
.span_1_of_3 {
width: 100%;
}
}
HTML:
<div class="section group">
<div class="col span_1_of_3">
This is column 1
</div>
<div class="col span_1_of_3">
This is column 2
</div>
<div class="col span_1_of_3">
This is column 3
</div>
</div>
解决方案
It would be more efficient to optimize your source order for mobile and use metadept's solution for reordering the columns for desktop.
However, if the source order cannot be modified for whatever reason or you do not know the widths of the elements you wish to reorder, then you need Flexbox:
/* SECTIONS */
/* line 5, ../sass/test.scss */
.section {
clear: both;
padding: 0px;
margin: 0px;
}
/* line 11, ../sass/test.scss */
.a {
background-color: #CCF;
}
/* line 14, ../sass/test.scss */
.b {
background-color: #CFC;
}
/* line 17, ../sass/test.scss */
.c {
background-color: #FCC;
}
/* GRID OF THREE ============================================================================= */
@media only screen and (min-width: 480px) {
/* line 24, ../sass/test.scss */
.span_3_of_3 {
width: 100%;
}
/* line 28, ../sass/test.scss */
.span_2_of_3 {
width: 66.1%;
}
/* line 32, ../sass/test.scss */
.span_1_of_3 {
width: 32.2%;
}
/* COLUMN SETUP */
/* line 37, ../sass/test.scss */
.col {
display: block;
float: left;
margin: 1% 0 1% 1.6%;
}
/* line 42, ../sass/test.scss */
.col:first-child {
margin-left: 0;
}
}
@media only screen and (max-width: 480px) {
/* line 48, ../sass/test.scss */
.section {
width: 100%; /* fix for Firefox */
display: -webkit-box;
display: -moz-box;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
/* line 53, ../sass/test.scss */
.a {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-webkit-flex-order: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}
/* line 57, ../sass/test.scss */
.b {
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
-webkit-flex-order: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
}
}
<div class="section group">
<div class="col span_1_of_3 a">This is column 1</div>
<div class="col span_1_of_3 b">This is column 2</div>
<div class="col span_1_of_3 c">This is column 3</div>
</div>
Note that I've modified your media queries to be a little more efficient.
这篇关于3列响应CSS（排序内容位置）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
