细胞重新排列的顺序在表中移动

Question

我试图改变我在@mobile屏幕上的表中的单元格的顺序，但还没有任何运气。

我在Mac宽度表是与不同的小区大小，颜色，字体大小等的网格，但在移动I希望它是由水平线分离，用一个链接，每个项目的简单列表。我设法做到了这一点，但我也想改变列表出现的顺序。

尝试添加的div和秩序这样的说法，但没有奏效。任何建议将是最受欢迎的！

这里是我的HTML和CSS手机：

@mobile screen CSS 
 

 
.situations { 
 

 

 
\t \t table.situ { 
 
\t \t margin-left: 0%; 
 
\t \t } 
 

 

 
\t \t tr { 
 
\t \t display: block; 
 
\t \t color: #161616 !important; 
 
\t \t line-height: 1 !important; 
 
\t \t border: none; 
 

 
\t } 
 

 
\t \t #frame { 
 
\t \t height: 100px; 
 
\t \t width: 100%; 
 
\t \t } 
 
\t 
 
\t td { 
 
\t \t /* Behave like a "row" */ 
 
\t \t display: block; 
 
\t \t background-color: #ffffff; 
 
\t \t border: none; 
 
\t \t border-bottom: 0.5px solid #161616; 
 
\t \t position: relative; 
 
\t \t padding-left: 2%; 
 
\t \t text-align: center; 
 
\t \t height: 60px; 
 
\t \t width: $fullWidth; 
 
\t \t font-size: 14px !important; 
 
\t \t color: #161616 !important; 
 
\t \t \t padding-top: 8%; 
 
\t \t padding-bottom: 8%; 
 
\t \t line-height: 1 !important; 
 

 
\t } 
 
\t 
 
\t td:before { 
 
\t \t /* Now like a table header */ 
 
\t \t position: absolute; 
 
\t \t /* Top/left values mimic padding */ 
 
\t \t top: 6px; 
 
\t \t left: 6px; 
 
\t \t width: 45%; 
 
\t \t padding-right: 10px; 
 
\t \t white-space: nowrap; 
 
\t \t color: #161616 !important; 
 
\t \t line-height: 1 !important; 
 
\t \t border: none; 
 
\t } 
 
    }

<section class="situations responsiveWidth center cinch2"> 
 
<div class="table"><table class="situ" id="frame" border="0" cellspacing="0" cellpadding="0"> 
 

 
    <tr> 
 
    <div id="situ4"><td class="product1" height="33.333%" rowspan="2"><a class="label black" href="product1.html">Text</a></td></div> 
 
    <div id="situ6"><td class="product2" height="16.666%"><a class="label black" href="product2.html">Text</a></td></div> 
 
    
 
    <div id="situ3"><td class="product3" height="50%" rowspan="3"><a class="label black" href="product3.html">Text</a></td></div> 
 
    </tr> 
 
    <tr> 
 
    \t <div id="situ5"><td class="product4" height="16.666%"><a class="label black" href="product4.html">Text</a></td></div> 
 
    </tr> 
 
    <tr> 
 
    \t <div id="situ2"><td class="product5" height="33.333%" colspan="2" rowspan="2"><a class="label black big" href="product5.html">Text</a></td></div> 
 
    </tr> 
 
    <tr> 
 
    <div id="situ7"><td class="product6" height="16.666%"><a class="label black" href="product6.html">Text</a></td></div> 
 
    </tr> 
 
    <tr> 
 
    <div id="situ8"><td class="product7" height="16.666%"><a class="label black startout" href="product7.html" id="situ8">Text</a></td></div> 
 
    <div id="situ1"><td class="product8" height="33.333%" colspan="2" rowspan="2"><a class="label white big" href="product8.html">Text</a></td></div> 
 
    </tr> 
 
    <tr> 
 
    <div id="situ9"><td class="product9" height="16.66666%"><a class="label black" href="product9.html" id="situ9">Text</a></td></div> 
 
    </tr> 
 
    </table></div> 
 
    <br> 
 
    </section>

Answer 1

你可以考虑使用的div而不是表，并有针对行的Flexbox的。改变列的顺序并不容易。

.table { 
 
    display: table; 
 
    width: 100%; 
 
} 
 

 
.row { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    width: 100%; 
 
    border-bottom: thin solid lightgray; 
 
} 
 

 
.cell { 
 
    display: table-cell; 
 
    padding: 0.5em; 
 
} 
 

 
.title { 
 
    order: 2; 
 
} 
 

 
.name { 
 
    order: 1; 
 
} 
 

 
.zip { 
 
    order: 4; 
 
} 
 

 
.place { 
 
    order: 3; 
 
}

<div class="table"> 
 
    <div class="row"> 
 
    <div class="cell title">Title</div> 
 
    <div class="cell name">Name</div> 
 
    <div class="cell zip">Zip</div> 
 
    <div class="cell place">Place</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="cell title">Title</div> 
 
    <div class="cell name">Name</div> 
 
    <div class="cell zip">Zip</div> 
 
    <div class="cell place">Place</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="cell title">Title</div> 
 
    <div class="cell name">Name</div> 
 
    <div class="cell zip">Zip</div> 
 
    <div class="cell place">Place</div> 
 
    </div> 
 
</div>