How to make the block отправить to a new line with a small screen (for example max-width:480px )?

 .input-group{ display:flex; flex-direction: row; } .modal-form { width: 100%; height: 100%; display:flex; } .modal-input-text{ display: flex; align-items: center; padding: .375rem .75rem; margin-bottom: 0; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #495057; text-align: center; white-space: nowrap; background-color: #e9ecef; border: 1px solid #ced4da; border-radius: .25rem; } .send-number { background-color: #BF4832; border-radius: .25rem; border-top-left-radius: 0; border-bottom-left-radius: 0; padding: 7px 10px 0px 10px; color: white; cursor: pointer; } 
  <div class="input-group mb-3 modal-input"> <div class="input-group-prepend modal-form"> <span class="input-group-text modal-input-text" id="basic-addon1">+380</span> <input type="text" class="form-control" placeholder="" aria-label="Username" aria-describedby="basic-addon1"> <div class="send-number">Отправить</div> </div>

    2 answers 2

    In the .modal-form we add the rule for transferring elements:

     .modal-form { flex-wrap: wrap; }

    Then, if its content does not fit into the flexbox, it will move to the next line. For complete confidence in the transfer, you can add an @media query stretching button 100% in width from the parent:

     @media screen and (max-width: 480px) { .send-number { width: 100%; } }

      For example, wrap input and span into a common block + set .modal-form { display: block; } .modal-form { display: block; } go .modal-form { flex-flow: column nowrap; } .modal-form { flex-flow: column nowrap; } :

       .input-group{ display:flex; flex-direction: row; } .modal-form { width: 100%; height: 100%; display:flex; } .modal-input-text{ display: flex; align-items: center; padding: .375rem .75rem; margin-bottom: 0; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #495057; text-align: center; white-space: nowrap; background-color: #e9ecef; border: 1px solid #ced4da; border-radius: .25rem; } .send-number { background-color: #BF4832; border-radius: .25rem; border-top-left-radius: 0; border-bottom-left-radius: 0; padding: 7px 10px 0px 10px; color: white; cursor: pointer; } .modal-form label { display: flex; } @media screen and (max-width: 480px){ .modal-form { display: block; } .form-control { display: block; width: 100%; } } 
        <div class="input-group-prepend modal-form"> <label> <span class="input-group-text modal-input-text" id="basic-addon1">+380</span> <input type="text" class="form-control" placeholder="" aria-label="Username" aria-describedby="basic-addon1"> </label> <div class="send-number">Отправить</div> </div>