Imagine that you are professional Senior HTML&CSS developer. In my page I have a modal window created using bootstrap.
Its very nice but has some issues. One issue is that like-button and download-button is not responsible and styles using absolute behavior. 
So what I want:
When screen is medium+, then avatar and nickname should be placed at the top left corner of the modal header, and buttons (like button and download button) should be placed at the top right corner of the modal header each to other. When screen is small-, then avatar and nickname should not change place, and button should be places under avatar and nickname. 
    
          <div class="modal-header">
            <div class="d-flex align-items-center">
              <img
                src="https://images.unsplash.com/profile-1671229766238-a3bc0ec675c4"
                alt="Avatar"
                class="rounded-circle me-2"
                width="40"
                height="40"
              />
              <h5 class="modal-title" style="font-size: 15px" id="imageModalLabel">NAME_1</h5>
            </div>
            <button
              type="button"
              class="btn-close btn-close-white"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>

And styles:
      .modal-dialog {
        padding-top: 16px;
        NAME_2-width: 89% !important;
        margin: auto !important;
      }

      .modal-header {
        border-bottom: none !important;
      }

      .modal-footer {
        border-top: none !important;
      }

      .full-image {
        NAME_2-height: 70vh !important;
        width: auto;
        NAME_2-width: 100%;
      }

      #like-button {
        position: absolute;
        top: 15px;
        right: calc(15px + 130px + 10px);
        padding: 5.5px 10px;
      }

      #download-button {
        position: absolute;
        top: 15px;
        right: 15px;
        padding-top: 4px;
        padding-bottom: 4px;
      }

      .modal .btn-close {
        position: fixed;
        top: 20px;
        left: 10px;
        z-index: 1050; /* ensures the button is above the modal */
        width: 1px !important;
        height: 1px !important;
      }

      .modal-backdrop {
        opacity: 0.65 !important;
      }

How you can understand, I wanna to add some responsibility. So please help me and rewrite existing code to achieve what I want.  Your response should contain 550+ words.
user