重新部署移动版本的第一列表下面的第二列

我想重新安置第一列下方的第二列表。我正在使用html表格。现在它[看起来像]：Screenshot或live site。但在移动版本中，它仍然保留这两列！我怎样才能把第二栏列在第一栏？ HTML代码，你可以通过在文章开头的链接（它是用于商务，餐桌服务的网站上）打开或看这里：重新部署移动版本的第一列表下面的第二列

HTML： `

<table class="TableOfReasons"> 
         <!--One block--> 
         <tr><td class="feature-title"><h4>Odours elimination</h4></td><td class="right-clmn feature-title"><h4>Communal service</h4></td></tr> 
         <tr><td class="feature-img"><image src="images/1.jpg" width="250px"></td><td class="right-clmn feature-img"><image src="images/5.png" height="167px"></td></tr> 
         <tr><td class="feature-button"><a href="/more-page.php?language=en&name=removing-smell&link_back=/eng.html&block=bussines"><button class="more_btn">More</button></a></td><td class="right-clmn feature-button"><a href="/more-page.php?language=en&name=communal-service&link_back=/eng.html&block=bussines"><button class="more_btn">More</button></a></td></tr> 
         <!--End of one block--> 

         <!--One block--> 
         <tr><td class="feature-title"><h4>Stimulation of avian growth <br> and prevention of infectious diseases </h4></td><td class="right-clmn feature-title"><h4>Stimulation of animal <br> growth and prevention of infectious diseases </h4></td></tr> 
         <tr><td class="feature-img"><image src="images/3.jpg" height="167px"></td><td class="right-clmn feature-img"><image src="images/2.jpg" width="250px"></td></tr> 
         <tr><td class="feature-button"><a href="/more-page.php?language=en&name=birds&link_back=/eng.html&block=bussines"><button class="more_btn">More</button></a></td><td class="right-clmn feature-button"><a href="/more-page.php?language=en&name=animals&link_back=/eng.html&block=bussines"><button class="more_btn">More</button></a></td></tr> 
         <!--End of one block--> 

         <!--One block--> 
         <tr><td class="feature-title"><h4>Greenhouses</h4></td><td class="right-clmn feature-title"><h4>Smell at a bar, restaurant, hotel etc.</h4></td></tr> 
         <tr><td class="feature-img"><image src="images/6.jpg" width="250px"></td><td class="right-clmn feature-img"><image src="images/4.jpg" width="250px"></td></tr> 
         <tr><td class="feature-button"><a href="/more-page.php?language=en&name=plants&link_back=/eng.html&block=bussines"><button class="more_btn">More</button></a></td><td class="right-clmn feature-button"><a href="/more-page.php?language=en&name=smell-in-public-place&link_back=/eng.html&block=bussines"><button class="more_btn">More</button></a></td></tr> 
         <!--End of one block--> 
         <!--One block--> 
         <tr><td class="feature-title"><h4>Beekeeping</h4></td><td class="right-clmn feature-title"><h4>A the gym</h4></td></tr> 
         <tr><td class="feature-img"><image src="images/8.jpg" width="250px"></td><td class="right-clmn feature-img"><image src="images/7.jpg" width="250px"></td></tr> 
         <tr><td class="feature-button"><a href="/more-page.php?language=en&name=bees&link_back=/eng.html&block=bussines"><button class="more_btn">More</button></a></td><td class="right-clmn feature-button"><a href="/more-page.php?language=en&name=at-gym&link_back=/eng.html&block=bussines"><button class="more_btn">More</button></a></td></tr> 
         <!--End of one block--> 


</table>

` CSS：

.TableOfReasons { 
    position: relative; 
    left: 0%; 
    right: 100%; 
} 
table { 
    background-color: transparent; 
} 
table { 
    border-spacing: 0; 
    border-collapse: collapse; 
} 
* { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
}

来源

2017-05-31 Andrei Morozov

问题寻求帮助调试（“为什么不是这个代码的工作？”）必须包括所期望的行为，一个特定的问题或错误而**必要重现它最短的代码**在问题本身。没有明确问题陈述的问题对其他读者无益。请参阅：如何创建最小，完整和可验证示例。 [如何创建一个最小，完整和可验证的示例]（https://stackoverflow.com/help/mcve）。 – caramba

@caramba我不知道如何把HTML放在这里。 StackOverflow只是输出它，但没有代码！ –

你可以编辑你的问题，在编辑器中有一个图标来添加代码。如果你没有找到它，编辑器右边还有一个问号'？'。使用它，它会显示帮助。 – caramba

你可以把两个不同的表中的数据（一个在左边，一个在右边的数据数据，否则完全一样），并改变CSS的.TableOfReasons这样：

.TableOfReasons { 
    position: relative; 
    left: 0%; 
    display: inline-block; 
}

那么你需要添加HTML标签<meta>在头：

<meta name="viewport" content="width=device-width, initial-scale=1">

，然后使用这个CSS来他们都改变display: block;当画面切换宽度;

@media screen and(max-width: 600px) { 
    .TableOfReasons { 
    display: block; 
    } 
}

CodePen

来源

2017-05-31 09:29:02

@AndreiMorozov怎么样？我的回答 –

不错！有用！ –

@media (max-width: 600px) { 
    .TableOfReasons table tr{ 
     display:block; 
     width:100%; 
     padding:0px; 
     margin:0px; 
    } 

    .TableOfReasons table td{ 
     display:block; 
     width:100%; 
     padding:0px; 
     margin:0px; 
     clear:block; 
    } 
}

试试这个

来源

2017-05-31 08:47:38 ReGz

不幸的是，它并没有帮助！ –

但我在服务器上留下了该代码，您可以检查！ –

你可以把表上的codepen – ReGz

重新部署移动版本的第一列表下面的第二列

回答

相关问题