如何制作移动响应栏？

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

无标题

时间12：001：002：00时间12：001：002：00

Answer 2

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

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

Answer 3

CSS @media可用于以屏幕宽度为基础隐藏元素。检查示例

Div show/hide media query