Html 3列响应式CSS（订购内容位置）

我想知道，当屏幕尺寸减小到480或更低时，是否有办法订购内容位置。我的意思是在第三栏我会有名字、号码和地址等，在第二栏我会有社交内容，在第一栏我会有一张图片。我想有名称和地址堆栈首先，然后图像，然后社会图标。顺序是3,1,2。我试着保持它的响应性

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%;
}
}

<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>

HTML:

/*  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%;
}
}

<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>

这是第1栏
这是第二栏
这是第三栏

我在理解你的专栏顺序方面有点困难，但在手机上重新排列的方法是使用边距“推”和“拉”。例如：

.span_1_of_3 {
    margin-left: 33%;
}

.span_2_of_3 {
    margin-left: -65%;
}

这将使列2在并排（桌面）布局中显示在列1之前，然后可以删除堆叠（移动）布局的边距

请参阅此JSFIDLE：

编辑2

---

我想我已经按照你想要的顺序安排好了。如果您仍在寻找解决方案，请尝试以下方法：

嗯，这是一种奇怪的解决方案，但使用jQuery:）只是尝试一下

首先，我在HTML标记中添加了额外的类。然后，我为mobile添加了类

的此属性

.third {
    width: 100%;
    margin: 0;
    position: absolute;
    top: 0;
}

后面是jQuery代码

$(window).resize(function(){
    if ($(".third").css("position") == "absolute") 
    {
        $(".first").css("margin-top", $(".third").height());
    }
    else
    {
        $(".first").css("margin-top", "1%");
    }
});

有很多变化，所以只要看看这把小提琴

也许有人只有CSS解决方案，但这是目前为止我能做的最好的解决方案。
优化移动设备的源代码顺序和使用metadept的解决方案对桌面列重新排序会更有效

但是，如果出于任何原因无法修改源顺序，或者您不知道要重新排序的元素的宽度，则需要Flexbox：


/*节*/
/*第5行，../sass/test.scss*/
.科{
明确：两者皆有；
填充：0px；
边际：0px；
}
/*第11行，../sass/test.scss*/
.a{
背景色：#CCF；
}
/*第14行，../sass/test.scss*/
.b{
背景色：#CFC；
}
/*第17行，../sass/test.scss*/
c{
背景色：#FCC；
}
/*三个网格======================================================================================================================*/
@仅介质屏幕和（最小宽度：480px）{
/*第24行，../sass/test.scss*/
.span_3_of_3{
宽度：100%；
}
/*第28行，../sass/test.scss*/
.span_2_/u 3{
宽度：66.1%；
}
/*第32行，../sass/test.scss*/
.span_1_/u 3{
宽度：32.2%；
}
/*列设置*/
/*第37行，../sass/test.scss*/
上校{
显示：块；
浮动：左；
利润率：1%01%1.6%；
}
/*第42行，../sass/test.scss*/
上校：第一个孩子{
左边距：0；
}
}
@仅介质屏幕和（最大宽度：480px）{
/*第48行，../sass/test.scss*/
.科{
宽度：100%；/*Firefox修复程序*/
显示：-网络工具包盒；
显示器：-moz盒；
显示：-webkit flexbox；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-网络工具包盒方向：垂直；
-莫兹盒方向：垂直；
-webkit盒方向：正常；
-莫兹盒方向：正常；
-webkit柔性方向：列；
-ms-flex方向：列；
弯曲方向：立柱；
}
/*第53行，../sass/test.scss*/
.a{
-webkit盒序数组：2；
-moz盒序数组：2；
-webkit弹性订单：1；
-ms弹性订单：1；
-网络工具包订单：1；
顺序：1；
}
/*第57行，../sass/test.scss*/
.b{
-webkit盒序数组：3；
-moz盒序数组：3；
-webkit弹性订单：2；
-ms弹性订单：2份；
-网络工具包订单：2份；
顺序：2；
}
}
这是第1栏
这是第二栏
这是第三栏

请注意，我已将您的媒体查询修改为更高效一点。
这看起来不错，但我试着自己订购，我无法理解。您所做的布局，我需要按“3移动到2…….2移动到1…….1移动到3.您有没有可能再抽出几分钟来重新排列它？@已耗尽-假设在桌面上它是（从左到右）1，2，3，你想让手机变成2，3，1？桌面是1，2，3，在手机上我需要1，3，2年很抱歉你是对的3，1，2！这太伤我的脑筋了！哈哈，因为我刚刚为3，1，2创建了解决方案，当我看到“1，3，2”时“我的脑子爆炸了：哇，那太干净了！你不用JS也能做到这一点，我很满意，因为到目前为止，在我的整个构建过程中，我一直在使用纯html5和css3来保持它的轻量级。好东西，西曼农！有一件事我不明白，“/sass/test.scss”只是作为参考还是做了些什么？它只是用来调试sass的，我在粘贴时懒得把它们都删掉。我现在有个问题。我已经加入并开始用内容填充它，但它现在不起作用了。它开始移动到错误的位置，内容重叠Hi@cimmanon这太棒了。我想知道是否可以使用类似的代码在较小的屏幕上重新组织表列？我尝试了几种不同的方法，但都没有效果，希望您能在这里了解我的问题（有一个plnkr示例）：