Выровняйте кнопку в нижней части div на рабочем столе и слева от div на мобильном

Question

Я пытаюсь выровнять кнопку в нижней части этого элемента (чтобы нижняя часть находилась на одном уровне с нижней частью текстовой области).

Codepen

Я смог сделать это, добавив к кнопке следующий класс:

.btn-bottom {
    position: absolute;
    top: 130px;
}

К сожалению, из-за этого кнопка на телефоне полностью исчезла:

Как сделать так, чтобы кнопка совпала с нижней частью текстовой области на рабочем столе и с левым краем текстовой области на мобильном телефоне?

<div class="padding">
    <div class="container">
        <div class="row">
            <h3 class="text-center">Contact Us</h3>
            <h5 class="text-center title-lighter">Our team will respond within 48 hours.</h5>
        </div>
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="col-md-4">
                    <label for="inputname">Name</label>
                    <input type="text" class="form-control" id="inputname">
                </div>
                <div class="col-md-4">
                    <label for="email">E-mail</label>
                    <input type="text" class="form-control" id="email">
                </div>
                <div class="col-md-4">
                    <label for="organization">Organization</label>
                    <input type="text" class="form-control" id="organization">
                </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <div class="col-md-8">
                        <label for="message">Message</label>
                        <textarea class="form-control input-lg" style="min-width: 100%;" rows="5" id="message"></textarea>

                    </div>
                    <div class="col-md-4">

                        <button type="submit" class="btn btn-primary">Submit</button>
                </div>
                </div>
            </div>
        </div>
        <hr />
        </div>

Answer 1

Вы можете установить для столбцов элементов, содержащих текстовую область и кнопку, значение display: inline-block (для этого нужно установить float: none), а затем использовать vertical-align: bottom, чтобы выровнять элементы по нижней частилиния, на которой они сидят.

Я также добавил класс .row--mod в строку элемента, содержащую текстовую область и кнопку, чтобы помочь нацелить элементы.

.row--mod .col-md-8.col-md-offset-2 > * {
  float: none;
  display: inline-block;
  vertical-align: bottom;
}

.row--mod .col-md-8.col-md-offset-2> :first-child {
  margin-right: -4px;
  width: 66.6667%;
}

Использование inline-block создает дополнительный интервал, от которого вы можете избавиться , используя ряд методов ( Я выбрал отрицательное поле ).

Ниже приведена демонстрация:

body {
  font-size: 12px !important;
  font-family: 'Roboto Condensed', sans-serif !important;
  font-weight: 400 !important;
}

.title-lighter {
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  color: #737373;
}

.centering {
  float: none;
  margin: 0 auto;
}

.btn-centering {
  width: 90% !important;
  margin-left: 5% !important;
  margin-bottom: 5px !important;
}

.padding {
  padding: 80px 0;
}

.contact-form {
  background: #fff;
  margin-top: 10%;
  margin-bottom: 5%;
  width: 70%;
}

.contact-form .form-control {
  border-radius: 1rem;
}

.contact-form form {
  padding: 14%;
}

.contact-form form .row {
  margin-bottom: -7%;
}

.contact-form h3 {
  margin-bottom: 8%;
  margin-top: -10%;
  text-align: center;
  color: #0062cc;
}

.contact-form .btnContact {
  width: 50%;
  border: none;
  border-radius: 1rem;
  padding: 1.5%;
  background: #dc3545;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
}

.btnContactSubmit {
  width: 50%;
  border-radius: 1rem;
  padding: 1.5%;
  color: #fff;
  background-color: #0062cc;
  border: none;
  cursor: pointer;
}

.centered-row {
  text-align: center;
}

.btn-bottom {
  display: table-cell;
  vertical-align: bottom;
}

.box {
  display: table !important;
  width: 100%;
  height: 100%;
}

@media (min-width: 992px)
{
.row--mod .col-md-8.col-md-offset-2 > * {
  float: none;
  display: inline-block;
  vertical-align: bottom;
}

.row--mod .col-md-8.col-md-offset-2> :first-child {
  margin-right: -4px;
  width: 66.6667%;
  
}
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="padding">
  <div class="container">
    <div class="row">
      <h3 class="text-center">Contact Us</h3>
      <h5 class="text-center title-lighter">Our team will respond within 48 hours.</h5>
    </div>
    <div class="row">
      <div class="col-md-8 col-md-offset-2">
        <div class="col-md-4">
          <label for="inputname">Name</label>
          <input type="text" class="form-control" id="inputname">
        </div>
        <div class="col-md-4">
          <label for="email">E-mail</label>
          <input type="text" class="form-control" id="email">
        </div>
        <div class="col-md-4">
          <label for="organization">Organization</label>
          <input type="text" class="form-control" id="organization">
        </div>
      </div>
    </div>
    <div class="row row--mod">
      <div class="col-md-8 col-md-offset-2">
        <div class="col-md-8">
          <label for="message">Message</label>
          <textarea class="form-control input-lg" style="min-width: 100%;" rows="5" id="message"></textarea>

        </div>
        <div class="col-md-4">

          <button type="submit" class="btn btn-primary">Submit</button>
        </div>
      </div>
    </div>
  </div>
  <hr />
</div>