Responsiveness is not working on the small and xs- screen

Question

I have to create a content like this, however it is not behaving responsive when I switch to different screens. I am attaching the screenshot for the smaller screen size and you can see the elements are overlapping . on xs,small and medium screen - Also please let me know what changes should I make more to make it perfect? I am new UI developer. Thanks in advance.

small - medium -

large-

ex-large-

HTML code -

<div class="container-fluid p-0 overflow-hidden">
  <div class="row px-2 py-1">
    <div class="col-xl-7 col-lg-6 col-md-5 col-sm-5 col-6 mainFirst">
      <div class="div1">
        <div class="heading1">Solution Number</div>
        <div class="content1">
          ISX0067537-001
          <img class="ml-10" src="/assets/images/myImage.png" alt="My Image" />
        </div>
      </div>

      <div class="div3">
        <div class="heading1">Solution Name</div>
        <div class="content1">My Solution 67537...</div>
      </div>
    </div>
    <div
      class="col-xl-5 col-lg-6 col-md-7 col-sm-7 col-6 secondMainDiv ml-auto"
    >
      <div class="lto">LTO</div>
      <div class="div5">
        <i class="fa fa-history hisIcon"></i>
        12 days
      </div>

      <div class="usd">USD</div>
      <div class="div7">013232440.00</div>
      <div class="div">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="25"
          viewBox="0 0 24 25"
          fill="none"
        >
          <path
            d="M8 18.5C6.9 18.5 6.01 19.4 6.01 20.5C6.01 21.6 6.9 22.5 8 22.5C9.1 22.5 10 21.6 10 20.5C10 19.4 9.1 18.5 8 18.5ZM2 2.5V4.5H4L7.6 12.09L6.25 14.54C6.09 14.82 6 15.15 6 15.5C6 16.6 6.9 17.5 8 17.5H20V15.5H8.42C8.28 15.5 8.17 15.39 8.17 15.25L8.2 15.13L9.1 13.5H16.55C17.3 13.5 17.96 13.09 18.3 12.47L21.88 5.98C21.96 5.84 22 5.67 22 5.5C22 4.95 21.55 4.5 21 4.5H6.21L5.27 2.5H2ZM18 18.5C16.9 18.5 16.01 19.4 16.01 20.5C16.01 21.6 16.9 22.5 18 22.5C19.1 22.5 20 21.6 20 20.5C20 19.4 19.1 18.5 18 18.5Z"
            fill="#626469"
          />
          <path
            d="M23 7C23 10.0376 20.5376 12.5 17.5 12.5C14.4624 12.5 12 10.0376 12 7C12 3.96243 14.4624 1.5 17.5 1.5C20.5376 1.5 23 3.96243 23 7Z"
            fill="#DC0A0A"
          />
          <path
            d="M15.7188 9.75002V8.93752L17.6172 7.17971C17.7786 7.02346 17.9141 6.88283 18.0234 6.75783C18.1345 6.63283 18.2188 6.51044 18.276 6.39065C18.3333 6.26912 18.362 6.13804 18.362 5.99742C18.362 5.84117 18.3264 5.70662 18.2552 5.59377C18.184 5.47919 18.0868 5.39151 17.9635 5.33075C17.8403 5.26825 17.7005 5.237 17.5443 5.237C17.3811 5.237 17.2387 5.26999 17.1172 5.33596C16.9957 5.40193 16.9019 5.49655 16.8359 5.61981C16.77 5.74308 16.737 5.88978 16.737 6.05992H15.6667C15.6667 5.71096 15.7457 5.40801 15.9036 5.15106C16.0616 4.89412 16.283 4.69533 16.5677 4.55471C16.8524 4.41408 17.1806 4.34377 17.5521 4.34377C17.934 4.34377 18.2665 4.41148 18.5495 4.5469C18.8342 4.68058 19.0556 4.86634 19.2135 5.10419C19.3715 5.34203 19.4505 5.6146 19.4505 5.9219C19.4505 6.12328 19.4106 6.32207 19.3307 6.51825C19.2526 6.71443 19.1128 6.93231 18.9115 7.1719C18.7101 7.40974 18.4262 7.69533 18.0599 8.02867L17.2812 8.79169V8.82815H19.5208V9.75002H15.7188Z"
            fill="#FAFAFA"
          />
        </svg>
        <div class="div fa fa-angle-down" style="margin-right: -11px"></div>
      </div>
      <button type="button" class="btn divButton">
        <span class="btnLabel">Go to Design Portal</span>
      </button>
    </div>
  </div>
</div>

Respective CSS-

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.container-fluid
{
        width: auto;
        height: 53px;
        padding: 5px 10px;
        background: #FFF;
                    /* Elevation / 03 dp */
            box-shadow: 0px 1px 3px 0px rgba(51, 51, 51, 0.14), 0px 2px 4px 0px rgba(51, 51, 51, 0.12), 0px 1px 5px 0px rgba(51, 51, 51, 0.14);
}
.heading1
{
    color: var(--greyscale-se-dark-grey-626469, #626469);
    
        /* Paragraph/P-Nano-Regular-12|15 */
        font-family: Nunito;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        /* 166.667% */
}
.content1
{
    color: var(--greyscale-se-dark-grey-626469, #626469);
        font-family: Nunito;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 25px;
        /* 156.25% */
}
.mainFirst
{
    display: flex;
}

.div3
{
    margin-left:10px;
}



.lto
{
    color: var(--greyscale-medium-grey-9-fa-0-a-4, #9FA0A4);
        text-align: right;
        /* Headings/P-Bold-14|20 */
        font-family: Nunito;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: 20px;
        margin-left: 10px;
        
        /* 142.857% */
}

.hisIcon
{
    margin-left: -10px;
    padding: 0 auto;
}
.div5
{
    color: var(--se-green-super-life-green-24-b-43-f, #24B43F);
    
        /* Paragraph/P-Small-Bold-14|20 */
        font-family: Nunito;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: 20px;
        /* 142.857% */
}
.usd
{
    color: var(--greyscale-medium-grey-9-fa-0-a-4, #9FA0A4);
        text-align: right;
    
        /* Headings/P-Bold-14|20 */
        font-family: Nunito;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: 20px;
        /* 142.857% */
}
.div7
{
    color: var(--se-green-super-life-green-24-b-43-f, #24B43F);
        text-align: right;
    
        /* Paragraph/P-Big-Bold-18|30 */
        font-family: Nunito;
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: 30px;
        margin-right: -16px;
        /* 166.667% */
}
.secondMainDiv
{
   display: flex;
align-content : flex-end;
justify-content: space-between;
padding: 5px;
    height: fit-content;
    align-items: baseline;
    gap :4px;
}


.divButton
{
    display: flex;
    height: 34px;
        padding: 6px 12px;
        justify-content: flex-end;
        align-items: center;
        border-radius: 2px;
        background: var(--se-green-super-life-green-24-b-43-f, #24B43F);
}
.btnLabel
{
color: var(--neutral-light-n-0, #FFF);
    text-align: right;

    /* Buttons / Button-Medium-Bold-16|Auto */
    font-family: Nunito;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

Answer 1

Think of this in physical real world terms. If you have a few items with some spaces between them in one long row and want to fit all of them in a smaller row, there are only few options you have:

1. reduce the size of items. For example, mainFirst has less content than secondMainDiv so, maybe, give a class of "col-4" to mainFirst and "col-8" to secondMainDiv which would give secondMainDiv more space on extra small screens (xs).
2. reduce the space between them
3. have multiple rows. For example, have the mainFirst and secondMainDiv which can be achieved with "col-12" class for both of them which would give them full width on extra small screens (xs). And probably will have to remove "row" class from their parent div.
4. any combination of 1, 2 and 3