Нужна помощь в колонках Bootstrap

Question

Я пытаюсь написать адресное поле. Я хочу, чтобы блок «Штат и страна» находился справа от города и почтовый индекс.

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

<div class="col-sm-12 col-md-6 col-lg-6">

  <div class="need-info">
    <p class="info-title">Enter Your Address.</p>
    <input type="text" class="form-control" placeholder="Address line 1.">
  </div>

  <div class="need-info">
    <input type="text" class="form-control" placeholder="Address line 2.">
  </div>
</div>
<div class="col-sm-12 col-md-3 col-lg-3">
  <div class="need-info">
    <input type="text" class="form-control" placeholder="City">
  </div>
  <div class="need-info">
    <input type="number" class="form-control" placeholder="Postal Code">
  </div>
</div>
<div class="col-sm-12 col-md-3 col-lg-3">
  <div class="need-info">
    <input type="text" class="form-control" placeholder="State">
  </div>
  <div class="need-info">
    <input type="text" class="form-control" placeholder="Country">
  </div>
</div>

Answer 1

Незначительные изменения в существующем коде, чтобы получить то, что вы ищете ...

• при небольшом размере, занимают все 12 столбцов
• , иначе 6 столбцов для почтового индекса,город, страна и штат

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


<div class="col-sm-12 col-md-12 ">

  <div class="need-info">
    <p class="info-title">Enter Your Address.</p>
    <input type="text" class="form-control" placeholder="Address line 1.">
  </div>

  <div class="need-info">
    <input type="text" class="form-control" placeholder="Address line 2.">
  </div>
</div>
<div class="col-sm-12 col-md-12 col-lg-12">
  <div class='row'>
    <div class="col-12 col-sm-6">
      <div class="need-info">
        <input type="text" class="form-control" placeholder="City">
      </div>
    </div>
    <div class="col-12 col-sm-6 ">
      <div class="need-info">
        <input type="text" class="form-control" placeholder="state">
      </div>
    </div>
    <div class="col-12 col-sm-6 ">
      <div class="need-info">
        <input type="text" class="form-control" placeholder="postal code">
      </div>
    </div>
    <div class="col-12 col-sm-6 ">
      <div class="need-info">
        <input type="text" class="form-control" placeholder="country">
      </div>

    </div>

  </div>
</div>

Answer 2

Попробуйте с этой структурой.

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

<div class="row">
    <div class="col-md-12">
        <div class="need-info">
            <p class="info-title">Enter Your Address.</p>
            <input type="text" class="form-control" placeholder="Address line 1.">
        </div>
        <div class="need-info">
            <input type="text" class="form-control" placeholder="Address line 2.">
        </div>
    </div>
    <div class="col-md-6">
        <div class="need-info">
            <input type="text" class="form-control" placeholder="City">
        </div>
    </div>
    <div class="col-md-6">
        <div class="need-info">
            <input type="text" class="form-control" placeholder="State">
        </div>
    </div>
    <div class="col-md-6">
        <div class="need-info">
            <input type="number" class="form-control" placeholder="Postal Code">
        </div>
    </div>
    <div class="col-md-6">
        <div class="need-info">
            <input type="text" class="form-control" placeholder="Country">
        </div>
    </div>
</div>