Bootstrap Gird отзывчивое размещение

Question

Я новичок в разработке внешнего интерфейса, Нужен эксперт, чтобы решить мою проблему.

Я разрабатываю страницу с bootstrap (v: 4.4.1). Я много пробовал, но не повезло. Я нарисовал одно изображение, помогающее в объяснении

Ниже приведен мой код

<div class="container">
    <div class="row">
        <div class="col-lg-3 col-sm-6" >
            <img src="../images/bdanew_logo.png" width="150px" style=" display:block; margin:auto;"  />
        </div>
        <div class="col-lg-3 col-sm-6" style="font-family: 'Bellota Text', cursive; font-size:11px;padding-top:2px;">
            <div class="row">
                <div class="col test">
                    <i class="fas fa-user"></i> Khurram Shaikh (logout)
                </div>
            </div>
            <div class="row">
                <div class="col test" >
                    <i class="fas fa-clock"></i>&nbsp;<label id="time"></label> 
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-sm-12 heading" >
            <h2>E-Learning Management System</h2>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12" >
            <hr/>
        </div>
    </div>
</div>

и css:

@media screen and (min-width: 1024px){
    .container{
        width:80%;
    }
    h2{
        font-family: 'Baloo Chettan 2', cursive;
    }
}

/*###Tablet(medium)###*/
@media screen and (min-width : 768px) and (max-width : 1023px){
    .container{
        width:100%;
    }
    h2{
        font-family: 'Baloo Chettan 2', cursive;
        font-size:12px;
    }
}

/*### Smartphones (portrait and landscape)(small)### */
@media screen and (min-width : 0px) and (max-width : 767px){
    .container{
        width:100%;
    }
    h2{
        font-family: 'Baloo Chettan 2', cursive;
        font-size:22px;
        margin:0px auto;
    }
    .test{
        text-align:right !important;
    }
    .heading{
        text-align:center;
    }

}

Я знаю, что это что-то вроде базового c, но я повторяю, я новичок в передней части.

Спасибо

Answer 1

Вы правильно загрузили Bootstrap? Потому что это должно работать:

@media screen and (min-width: 1024px) {
  .container {
    width: 80%;
  }
  h2 {
    font-family: 'Baloo Chettan 2', cursive;
  }
}


/*###Tablet(medium)###*/

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .container {
    width: 100%;
  }
  h2 {
    font-family: 'Baloo Chettan 2', cursive;
    font-size: 12px;
  }
}


/*### Smartphones (portrait and landscape)(small)### */

@media screen and (min-width: 0px) and (max-width: 767px) {
  .container {
    width: 100%;
  }
  h2 {
    font-family: 'Baloo Chettan 2', cursive;
    font-size: 22px;
    margin: 0px auto;
  }
  .test {
    text-align: right !important;
  }
  .heading {
    text-align: center;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

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

<div class="container">
  <div class="row">
    <div class="col-lg-3 col-sm-6">
      <img src="../images/bdanew_logo.png" width="150px" style=" display:block; margin:auto;" />
    </div>
    <div class="col-lg-3 col-sm-6" style="font-family: 'Bellota Text', cursive; font-size:11px;padding-top:2px;">
      <div class="row">
        <div class="col test">
          <i class="fas fa-user"></i> Khurram Shaikh (logout)
        </div>
      </div>
      <div class="row">
        <div class="col test">
          <i class="fas fa-clock"></i>&nbsp;<label id="time"></label>
        </div>
      </div>
    </div>
    <div class="col-lg-6 col-sm-12 heading">
      <h2>E-Learning Management System</h2>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-12">
      <hr/>
    </div>
  </div>
</div>