html - 将水平数据列表转换为垂直媒体查询，CSS

Question

请帮助使用媒体查询将以下标记转换为在各种屏幕上响应，也请随时更新标记的样式：

以下代码的突出问题是：

1. 代码没有响应

2. 样式在标记的日期和时间部分特别中断。具体来说，这些 css 类跨越屏幕 .downtime-styles & .date-container & .date-range & .date-month & .date-time & .date-day 类在下面的 CSS 中指定

.downtime-styles{
        text-align: center;
        padding-bottom: 30px;
        color: #007599;
        font-family: Univers LT W01_55 Roman1475956,Arial,serif;
    }

    .date-container {
        display: inline-block;
        text-align: center;
        color: #007599;
        font-family: Univers LT W01_55 Roman1475956,Arial,serif;
    }

    .date-range {
        height: 100%;
        display: flex;
        padding-left: 15px;
        -webkit-box-pack: center;
        justify-content: left;
        -webkit-box-align: center;
        align-items: center;
    }

    .date-month {
        width: 100%;
        font-size: 14px;
        text-transform: uppercase;
        padding-top: 30px;
        margin: 0;
    }

    .date-time {
        width: 100%;
        font-size: 14px;
        text-transform: uppercase;
        padding-top: 0px;
        margin: 0;
    }
    .date-day {
        font-size: 24px;
        padding-bottom: 0px;
        margin-bottom: 0;
    }

    .div-div {
        padding-top: 20px;
        padding-left: 40px;
        font-size: 100%;
        font: inherit;
    }

    .main-div{
        position: relative;
        margin-top: 10px;
        display: flex;
        margin-right: 0px;
        margin-left: 0px;
        height: 125px;
        border: 1px solid #A9A9A9;
        border-radius: 12px;
        overflow: hidden;
        background-color: #f8f8f8;
    }

    .main-div-summary{
        position: relative;
        margin-top: 10px;
        margin-right: 0px;
        margin-left: 0px;
        height: 125px;
        border: 1px solid #A9A9A9;
        border-radius: 12px;
        background-color: #f8f8f8;
    }

    .main-box{
        background-color: #2cbc85;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 30px;
    }

    .p-box{
        transform-origin: 0 50%;
        position: absolute;
        font-weight: bold;
        top: 0;
        bottom: 0;
        height: 30px;
        line-height: 30px;
        margin: auto;
        transform: rotate(-90deg) translate(-50%,50%);
        color: black;
        text-transform: uppercase;
        font-size: 16px;
        font-family: Univers LT W01_65 Bold1475968,Arial,serif;
    }

    .title-class{
        font-size: 20px;
    }

    .pipeline-item-section{
        height: 100%;
        padding-top: 15px;
        padding-left: 70px;
        padding-bottom: 15px;
        display: flex;  
        flex-direction: column;
        justify-content: space-between;
        color: #000f2b;
        font-family: Univers LT W01_45 Light1475944,Arial,serif;
    }

    .light-font{        
        font-weight: normal;
        margin: 0px;
        font-weight: 100;
        font-family: Arial;
    }

<div class="row main-div">`enter code here`
            <div class="main-box">
                <p class="p-box"><span>COMPLETE</span></p>
            </div>
            <div class="col-xs-3 text-right pipeline-item-section">
                <p class="title-class"><span>TITLE OF EVENT</span></p>
            </div>
            <div class="col-xs-3 pipeline-item-section">
                <p class="title-class"><a class="hyperlink- 
                 text">XYZLMNOP</a></p>
                <div>
                    <p class="light-font"><span>Name: </span>ABC</p>
                    <p class="light-font"><span>Type: </span>XYZ</p>
                </div>
            </div>
            <div class="col-xs-3 pipeline-item-section">
                <p class="title-class">Users Notified: <a 
                class="hyperlink-text">4</a></p>
                <div>
                    <p class="light-font"><span>Impacted Count: </span> 
                    <span>3</span></p>
                    <p class="light-font"><span>Impacted List: </span> 
                    <span>1</span></p>
                </div>
            </div>
            <div class="col-xs-3 date-range">
                <div class="div-div">
                    <div class="date-container">
                        <p class="date-month">JUNE</p>
                        <p class="date-day">2</p>
                        <p class="date-time">10 AM</p>
                    </div>
                    <i class="fa fa-long-arrow-right"></i>
                    <div class="date-container">
                        <p class="date-month">JUNE</p>
                        <p class="date-day">3</p>
                        <p class="date-time">12 PM</p>
                    </div>
                    <div class="downtime-styles"><span>Downtime: 
                    </span>2 hours</div>
                </div>
                <div class="button-styles btn-group flex-btn-group- 
                  container">
                    <button type="submit" replaceUrl="true">
                        <span class="fa fa-remove"></span>
                    </button>
                    <button type="submit" replaceUrl="true">
                        <span class="fa fa-pencil"></span>
                    </button>
                </div>
            </div>
        </div>

标签： htmlcssmedia-queries