Как разбить столбец, когда текст слишком велик?

Question

У меня есть строка с двумя столбцами:

a) Для имени списка
b) Для кнопки редактирования.

col-md-6 отлично подходит для случаев, когда Название списка короткое, но когда оно длиннее, оно становится неуклюжим.

Неуклюжий:

html

<div class="row">
    <div class="col-md-6">
        <h1 class="box">Lista: {{ lista.name }}</h1>
    </div>
    <div class="col-md-6">
        <button id="editList" class="btn btn-primary">Editar</button>
    </div>
</div>
<hr>

Это становится хуже для мобильных телефонов, где название списка должно быть сверху кнопки "Editar".

Answer 1

добавить (col col-md-6) нет (col-md-6)

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

    <div class="row">
    <div class="col col-md-6">
        <h1 class="box">Lista: Mi Primary List</h1>
    </div>
    <div class="col col-md-6">
        <button id="editList" class="btn btn-primary">Editar</button>
    </div>
</div>
<hr>

Answer 2

если вы используете bootstrap

<div class="row">
        <div class="col-md-8 col-sm-6">
             <h1>welcome to my blog</h1>
        </div>
        <div class="col-md-4 col-sm-6>
             <button class="btn">hello</button>
        </div>
    </div>

просто css

   <div class="contains">
        <div class="text">
             <h1>welcome to my blog</h1>
        </div>
        <div class="button>
             <button class="btn">hello</button>
        </div>
    </div>
<style>
.contains {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
}
.text{
width: 60%;
}
.button{
width: 40%;
}
</style>