Сделайте кнопку в следующем ряду на маленьких экранах, но держите в том же ряду на большом экране в Bootstrap 4

Question

Я чувствую, что это должно быть просто, но я не могу обернуть голову вокруг этого:

Я хочу создать липкую нижнюю полосу (по сути, предупредительную полоску повара ie) с две строки текста и кнопка. На рабочем столе я хочу, чтобы кнопка появлялась прямо рядом с предложением, но на мобильном телефоне я хочу, чтобы она переходила на следующую строку.

Каким был бы хороший и простой способ добиться этого?

Спасибо!

Answer 1

В основном вы используете сеточную систему с col внутри row и выбираете, какой размер вашего контента вам нужно изменить. Вот ссылка на решение, использующее bootstrap: https://codepen.io/DohaHelmy/pen/vYEjXzO

, и ниже приведено решение без классов bootstrap, но с той же функциональностью bootstrap системы сетки.

#cookies {
  background-color: #eee;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

p {
  padding: 20px;
}

button {
  color: #fff;
  background-color: #357832;
  border: none;
  height: 30px;
  padding: 5px 20px;
}

@media (max-width: 576px) {
  #cookies {
    flex-direction: column;
  }
}

<div id="cookies">
  <p>consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ull</p>
  <button>aciton</button>
</div>