html - 如何制作移动响应栏

Question

我的网站上有一个时间表，它由两栏组成。我希望它在桌面设备中为 2 列，在移动设备中为 1 列。

.text_demoBlock {
    padding-bottom:20px; 
    width:65%;
    text-align:justify;
    column-count: 2; 
    -moz-column-count: 2; 
    -webkit-column-count: 2; 
    column-gap: 40px; 
    -moz-column-gap: 40px;
    -webkit-column-gap: 40px;
    column-rule: 1px solid #000; 
    -moz-column-rule: 1px solid #000;
    -webkit-column-rule: 1px solid #000;
    }

  <div class="text_demoBlock">
    <p><b>Time</b></p>
    <p><b>08:55  Time</span>
<br>Time</b>
</p>
<p>09:00 Time</p>
<p>09:30  Time</p>
<p>10:00  Time</p>  
<p>       Time</p>
<p>11:00  Time</p>
<p>11:30  Time</p>
<p>12:00  Time</p>
<p>13:00  Lunch</p>
<p>14.00  Time</p>
<p>14.30  Time</p>
<p> 14.50  
3.  «Why We Love to Hate HR…and What HR Can   Do About It?»</p>
<p>16:00  Time</p>
<p>16:30  Time</p>
<p>17:00  Time</p>
<p>17:30  Time</p>
<p>18:00  Time</p>
<p>18:10  Time</p>
<p>18:15  It’s party time!</p>
  </div>

如何让它响应移动？

Answer 1

您需要做的就是添加媒体查询并指定所需的列数。

@media only screen and (max-width: 576px) {
  .text_demoBlock {
    column-count: 1;
    -moz-column-count: 1;
    -webkit-column-count: 1;
  }
}