Настройка классов столбцов для разных экранов с помощью Bootstrap

Question

Я пытаюсь построить свой интерфейс с помощью Bootstrap.Я пытаюсь установить 3 divs в одном row рядом друг с другом для средних и больших экранов.А для 768px я бы хотел разместить их один под другим.

file.html

<section className="about" id="about">
  <div className="container-fluid">
   <div className="row boxes justify-content-md-center">
    <div className="col-sm-12 col-md-4 box">
    <div className="innerBox">
      <div className="icons">
        <img src={iconEducation} className="img-responsive" />
      </div>
      <div className="box-body">
        <h3 className="box-title">Title </h3>

        <div className="box-list">
          <div className="box-list-items">
            <div className="item-ul"><img src={dot} className="img-responsive" /></div>
            <div>
              <p>Text</p>
            </div>
          </div>
          <div className="box-list-items">
            <div><img src={dot} className="img-responsive" /></div>
            <div className="item-ul">
              <p>Text</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    </div>

HTML-код одинаков для всех трех div с.

Проблема

На больших и средних экранах у меня есть два div с в одном ряду и третий внизу в новомстрока.Для экранов планшетов div не текут один под другим, но все еще находятся в одном ряду.Мне нужен макет два в одном ряду и третий под ним.

file.css

.about{
  padding: 127px 0 196px 0;
}

.about .row.boxes >div{
  margin: 0 20px 0 20px;
}

.about .box{
  height: 550px; 
  width: 100%;
  background-image: linear-gradient(144deg, #fdfdfd, #f9f9f9);
}
.about .innerBox{
  margin: auto;
  color: black;
  width: 100%;
  overflow: hidden;
}
.box-list-items > div {
  display: inline-block;
}

.box-list-items img {
  height: 35%; 
  width: 35%;
}

.icons { 
  height: 95px; 
  width: 95px;
  float: right;
  margin: 7% 5% 5% 0;
}
.icons img {
  width: 100%;
  height: 100%;
}


h3.box-title{
  font-size: 2.7em;
}

Когда я просматривал документы Bootstrap, я думал, что присвоение именкласс как .col-md-4 выровнял бы мои div s для выше 768px в том же ряду один рядом друг с другом, а внизу разместил бы их в виде display: box view.

Answer 1

theres не использовать экран @media only, и все, это будет работать:

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">abc</div>
    <div class="col-xs-12 col-sm-4  col-md-4 col-lg-4">xyz</div>
    <div class="col-xs-12 col-sm-4  col-md-4 col-lg-4">123</div>
  </div>
</div>

Вы можете проверить: https://jsfiddle.net/bfos8ttd/

Answer 2

вам нужно поместить весь код в file.html в сторону div с строкой класса и протестировать его снова.

Answer 3

@ user9347049 Это не вписывается в комментарии, поэтому я помещу это здесь для ясности.

Ваш контейнер-флюид позволяет вам использовать всю ширину экрана, но это все еще просто контейнер, который содержит ваши строки и столбцы.Вы создаете строки, затем добавляете столбцы.Как в:

<div class="container"> <!-- you can change this class to container-fluid class if you like -->
    <div class="row">
        <div class="col-md-4">
        </div>
        <div class="col-md-4">
        </div>
        <div class="col-md-4">
        </div>
    </div>
</div>

У вас может быть только один класс контейнера.Строка div содержит все ваши столбцы для этой строки.Вы можете иметь столько строк столбцов, сколько вам нужно.Если вы адаптируете свой код, вы должны начать получать некоторые результаты, которые вы ищете, прежде чем смотреть на него со стороны медиа-запроса.

Answer 4

Перейти к этому Ссылка для столбцов начальной загрузки (col-lg-4, col-md-4, col-sm-6, col-xs-12)

И следовать этиммедиа-запрос в соответствии с вашим устройством.

    @media only screen and (min-width:1024px) and (max-width: 1200px) {
    }

    @media only screen and (min-width:992px) and (max-width: 1023px) {

    }
    @media only screen and (min-width:768px) and (max-width: 991px) {

    }
    @media only screen and ( max-width: 767px ) {
    }
    @media only screen and ( max-width: 479px ) {
    }