如何在 Web 视图中以表格形式和在移动视图中以列表形式对齐数据？

如何解决如何在 Web 视图中以表格形式和在移动视图中以列表形式对齐数据？

要求：

网络视图

移动视图

问题

使用 Bootstrap 网格来实现所需的设计，但在 Web 视图中，如果我使用一列，则要求图像应有一整列，因此在移动视图中需要左对齐的文本确实如此不向左移动，因为整个图像列已经占用了空间。

进展

网络视图

移动视图

代码：

<div className="row " style={{height:"100%"}}>
        <div className="col-4 col-sm-2" style={{paddingTop:"3%"}}>
            {/* {loading ? <BeatLoader loading={loading} size={15} /> : <img className="sub-product-img" src={img} />} */}
            <img className="sub-product-img" src={require("./image")} />
        </div>
        <div className="col-8 col-sm-7"  style={{padding:"2%"}}>
            <div className="row">
                <div className="col-12 col-sm-6">
                    <h4 className="text-left sub-product-heading" style={{fontSize: "16px",fontWeight: "bold"}}>heading</h4>
                </div>
                <div className="col-12 col-sm-6">
                    <h4 className="text-left sub-product-heading-italic" style={{color:"grey"}}>Next Billing Date June 15,2021</h4>
                </div>
                
                <div className="col-12 col-sm-12">
                <h4 className="text-left sub-product-text">Order Number: 35438731</h4>
                     {/* <span className="text-left sub-product-heading">Next Billing Date</span> */}
                </div>
            </div>
            <div className="row">
                <div className="col-12 col-sm-6">
                    <h4 className="text-left sub-product-heading-light" style={{fontWeight:"600"}}>Started On</h4>
                    <h4 className="text-left sub-product-text">May 16,2020</h4>
                </div>
                <div className="col-12 col-sm-3">
                    <h4 className="text-left sub-product-heading-light" style={{fontWeight:"600"}}>Frequency</h4>
                    <h4 className="text-left sub-product-text">Monthly</h4>
                </div>
                <div className="col-12 col-sm-3">
                    <h4 className="text-left sub-product-heading-light" style={{fontWeight:"600"}}>Billing Address</h4>
                    <h4 className="text-left sub-product-text">2401 Warren Rd</h4>
                </div>
            </div>
        </div>
        <div className="col-12 col-sm-3 add-more-Box" style={{ backgroundColor: "#f7f8fa",border: "1px solid #dfdfdf" }}>
        <div className="col-12 col-sm-12" style={{marginTop:"13%"}}>
            <Button
                name="ADD MORE ITEMS"
                className="wine-custom-invert"
                style={{ fontSize: "13px",background: "white",color: "#ff8b43" }}
                onClick={() =>
                    console.log("Getting clicked")
                }
            />
            </div>
            <div className="col-12 col-sm-12" style={{marginTop:"5%",marginBottom:"2%"}}>
            <span style={{ color:"#2490ff",fontWeight: "bold",fontSize:"14px"
        }}>Manage Subscription</span></div>
        </div>
    </div>