How to align data in tabular form in web view and in list form in mobile view?

Question

Requirement:

Web view

Mobile View

Problem

Using Bootstrap grid to achieve the required design but in a web view, it is required that there should be one whole column for an image if I go with one column so in mobile view the text which needs to be left-aligned does not move to the left because there is already space occupied by whole image column.

Progress

Web view

Mobile view

Code:

<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>